Как динамически передать компонент родительскому компоненту

Я борюсь с передачей динамического компонента родительскому компоненту, вот моя проблема,

Мой шаблон и компонент

<tabset [justified]="true">
  <tab heading="Test 1 ">
      // Default 
  </tab>
  // Dynamic tabs 
  <tab *ngFor="let tab of tabs" [heading]="tab.title" >
     // Dynamic contents
  </tab>
</tabset>



import {
  Component, OnInit
} from '@angular/core';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.scss']
})
export class ContainerComponent implements OnInit {
  tabs: any[] = [
    {
      title: 'Test 2',
      content: AnyComponent
    },
    {
      title: 'Test 3',
      content: SomeOtherComponent
    }
  ];

  constructor() {

  }

  ngOnInit() {
  }

  addTab(tab: any) {
    this.tabs.push(tab);
  }

}

Что мне нужно... Когда я щелкаю пункт меню из другого компонента (навигатора), он будет использовать функцию addTab() для передачи в контейнер динамического компонента. Это может быть AComponent BComponent и т. д. и т. д. Я попытался использовать NGX Bootstrap для решения этой проблемы. но Ngx не передает компонент только html или что-то еще (или я просто не мог) https://valor-software.com/ngx-bootstrap/#/tabs


typescript javascript angular tabs ngx-bootstrap
person Recep Can    schedule 17.11.2017    source источник
comment
В любом случае, наверное, это плохая идея. Лучше предоставить сервис в родительском компоненте, внедрить его в дочерний компонент и использовать этот сервис для связи между родителем и дочерним элементом или, альтернативно, использовать @ViewChild(), чтобы родитель нашел дочерний компонент.   -  person Günter Zöchbauer    schedule 17.11.2017
comment
Почему это плохая идея? Что у тебя на уме?   -  person Recep Can    schedule 17.11.2017
comment
Ребенок не должен заниматься бизнесом, зная об API родителей и вызывая ненужную тесную связь. В любом случае, есть лучшие способы (как я предложил)   -  person Günter Zöchbauer    schedule 17.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Во-первых, то, что сказал Гюнтер Цохбауэр, верно, во-вторых, если вы знаете все существующие компоненты, я имею в виду тип (AnyComponent, OtherComponent, SomeotherComponent), затем используйте

<anycomponent *ngFor=" let any of anycomponentsarray"><anycomponent>

то же самое для другого

<Othercomponent *ngFor=" let any of othercomponentsarray"><Othercomponent>

если вы хотите использовать массив вкладок вместо этого

<tab *ngFor="let tab of tabs" [heading]="tab.title" >

<div *ngIf="tab.content === anycomponent">
<anycomponent><anycomponent>
<div>

<div *ngIf="tab.content === othercomponent">
<othercomponent><othercomponent>
<div>
  </tab>

в любом случае компонент не должен использоваться как переменная, если вы можете этого избежать. Используйте службу для связи между компонентами

здесь для получения дополнительной информации.

person Alber    schedule 17.11.2017
comment
спасибо за интерес похоже правда я проверю - person Recep Can; 20.11.2017