Как отобразить содержимое дочернего компонента в Angular? - PullRequest
Новая
       27

Как отобразить содержимое дочернего компонента в Angular?

0 голосов
/ 20 декабря 2018

У меня есть 3 компонента: вкладки, вкладка и панель инструментов, и я использую их следующим образом Пример в сети : 

<tabs>
  <tab title="tab 1" active="true">
    <toolbar>Toolbar 1</toolbar>
    Content 1
  </tab>
  <tab title="tab 2">
     <toolbar>Toolbar 2</toolbar>
     Content 2
  </tab>
</tabs>

Таким образом, вкладок имеет много вкладок, а вкладка имеет только одну панель инструментов.

Шаблон вкладок выглядит следующим образом: 

<div class="head">
  <ul class="tabs">
    <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
      <a>{{ tab.title }}</a>
    </li>
  </ul>

  <div class="toolbar">Toolbar of Active Tab</div>

</div>
<ng-content></ng-content>

Как отобразить панель инструментов текущей активной вкладки в: 

<div class="toolbar">Toolbar of Active Tab</div>

Каждый код компонентаэто: 

export class TabsComponent implements AfterContentInit {    
  @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;    
  select(tab: TabComponent) {
    this.tabs.toArray().forEach(tab => { 
      tab.active = false; 
    });
    tab.active = true;
  }
  ngAfterContentInit() {
    let actives = this.tabs.filter((tab) => tab.active);
    if(actives.length === 0) 
      this.select(this.tabs.first);
  }
}

export class TabComponent {
  @Input() active: boolean;
  @Input() title: string;
  @ContentChildren(ToolbarComponent) toolbar: ToolbarComponent;
}

export class ToolbarComponent { }

1 Ответ

0 голосов
/ 22 декабря 2018

На мой взгляд, ваш лучший вариант 2 будет:

Вариант 1 : отделить панель инструментов от компонента вкладки и установить ее реквизиты таким же образом, чтобы установить реквизиты вВкладка: 

<div class="head">
  <ul class="tabs">
    <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
      <a>{{ tab.title }}</a>
      <div class="toolbar">Toolbar of Active Tab {{tab.toolbarTitle}}</div>
    </li>
  </ul>
</div>

Опция 2 : передать реквизиты панели инструментов в AppState, чтобы панель инструментов могла получить к ним доступ из любого места.https://ngrx.io/

...