Angular 4,5如何檢測要更改的子組件中的ng含量

Question

我有一個這樣的父組件。 因此，菜單中的項目數取決於型號。 並更改模型。

<parent>
<menu>
  <item *ngIf="model.info">
   ... some data
  <item *ngIf="model.comments">
  .... some data 
  <item *ngIf="model.attachments">
   ... some data
  <item *ngIf="model.orders">
  .... some data
 </menu>
</parent>

父組件：

 export class Parent {
   @Input() public model: any;
 }   

在菜單本身就是使用ng-content這樣的組件的情況下，我正在基於menuItems計數創建菜單。

selector: 'menu',
template: ` <ul class="nav"
    <li *ngFor="let item of items"  [class.active]="item.active"
    <a class="btn" (click)="menuItemClicked(item)"> </a>
    </li>
    </ul>

  <div class="content">
     <ng-content></ng-content>
  </div>

`
export class MenuComponent  {
  @ContentChildren(MenuItem) items;

  ngAfterContentInit() {
     this.setActiveMenuItem();
  }

  public menuItemClicked(item) {
    this.changeActiveItem(item)
  }


  private setActiveItem() {
      const items = this.items.toArray();
      const actives = this.items.filter(i => i.active);

      if (!actives.length && items.length) {
         items[0].active = true;
      }
  }

  private changeActiveItem(item) {
      const items = this.items.toArray();
      items.forEach(i => i.active = false);
      item.active = true;
  }

}

如果單個menuItem本身是一個組件，則使用ng-content：

@Component({
selector: 'item',
template: `
   <ng-content *ngIf="active"></ng-content>
`
})
export class MenuItemComponent {
  @Input() active = false;

  public setActive() {
    this.active = true;
  }

  public setNotActive() {
    this.active = false;
  }

}

父組件的用法如下：

<app>
    <parent *ngIf="model.displayMenu" [model]="model"></parent>
</app>

因此，僅創建一次，然后根據用戶操作（點擊等）對模型進行更改。

現在是什么問題？ 問題是假設我已經創建了一個父組件。 並且在我的用例模型中進行更改。 我確切地知道模型何時更改，但事實是，在該更改上，我總是希望第一個菜單項在該更改上處於活動狀態。

我的問題是我無法使用ngAfterViewInit鈎子，因為該項目尚不存在。 角度變化檢測需要一些時間來更改該內容。 如果我使用ngAfterViewInit，則該掛鈎中的菜單項尚未更新。 我不想使用ngAfterViewChecked，因為它會不斷觸發更改檢測並導致性能問題（在模型信息中存在不斷的流更改）。

示例：我有活動的第4個菜單項和模型更改。 下一個型號只有2個菜單項，我希望該菜單項能夠平穩切換到第一個菜單項。 如果我不這樣做，則會得到空內容。

如何解決呢？

Answer 1

您可以只使用setter來實現ContentChildren：

items: QueryList<MenuItem>;

@ContentChildren(MenuItem) 
set menuItems(items) {
    this.items = items;
    this.setActiveMenuItem();
}

當容器改變時，會調用menuItems-setter。

希望有這個幫助，我能正確理解您的問題。