Question

我可能会对ViewChildren和ContentChildren以及它们的实际用法感到困惑。

请告诉我如何实际使用它们。他们的目的是什么？

@Component({
selector: 'my-app', 
  template: `
 <h4>ParentCmp</h4>
 <button (click)="clicked()">show/hide</button>

 <child> first child from childcmp </child>
 <bR><bR>
 <child *ngIf="show"> second child from childcmp </child>
 <bR><bR>
 <child1></child1>
 `,
  directives: [childcmp,child1cmp],

})


export class ParentCmp {
  show:boolean=true;

  @ViewChildren(childcmp) viewChildren: QueryList<childcmp>;

  @ContentChildren(childcmp) contentChildren: QueryList<childcmp>;


  ngAfterViewInit()
  {
    console.log('viewChildren-> ' + this.viewChildren.length);
    console.log( 'contentChildren-> ' + this.contentChildren.length);
  }

  clicked()
  {
     this.show=!this.show;
     this.viewChildren.changes.subscribe(() =>  console.log('viewChildren-> ' + this.viewChildren.length));
     this.contentChildren.changes.subscribe(() => console.log('contentChildren-> ' + this.contentChildren.length));
 }

}

bootstrap(ParentCmp, []);

child.ts

import {Component} from 'angular2/core';

@Component({

  selector:'child',
  template:`

  <h5>child cmp</h5>
  <ng-content></ng-content>

  `
})

export class childcmp{
  msg()
  {
    console.log('msg from child');
  }
}

child1.ts

import {Component} from 'angular2/core';

@Component({

  selector:'child1',
  template:`

  <h5>child1 cmp</h5>
  <ng-content></ng-content>

  `      
})

export class child1cmp{
  msg()
  {
    console.log('msg from child1');
  }
}

与此设置相关的问题。

在此处查看我的代码 - http://plnkr.co/edit/F2pJn1zxGFdFYzpeEwe1?p=preview

1）ParentComponent有三个孩子（two child type和one child1 type）

<child></child>
<child></child>
<child1></child1>

如何为三个孩子获得计数3？

2）使用ViewChildren和ContentChildren的一些逻辑/实用方法是什么（它非常混淆如何以及何时使用它们）。

Answer 1

区别在于＆＃34;查看＆＃34;是组件的模板，而内容是使用<ng-content>投影的HTML。

根据您要访问元素的位置，使用@ViewChildren()（组件模板）与@ContentChildren()（投影内容）

@ContentChildren()中的

ParentCmp是多余的，因为它的模板中没有<ng-content>标记。

Child和Child1有一个<ng-content>标记，使用@ContentChilden()可能有意义。
如果您在父模板中使用子组件，如

<child>
  <child1><child1>
</child>

然后在Child中，您将Child1元素视为@ContentChildren()结果。

请参阅Plunker

ViewChildern和ContentChildern之间的区别以及如何实际使用它们？

1 个答案: