当需要获取当前组件模版里的某一个元素时
@ViewChild配合local template variable
原生元素可以通过local variable获取。在写组件时，我们可以直接在组件模版里给这个 input 标签加标记(譬如：#myInput)， 然后把标记传给@ViewChild用来获取该元素。当组件初始化后，你就可以通过 renderer 在这个 input 标签上执行 focus 方法了。
@ViewChild配合local variable(推荐)
@Component({selector: 'my-comp',template: `<input #myInput type="text" /><div> Some other content </div>`})export class MyComp implements AfterViewInit {@ViewChild('myInput') input: ElementRef;constructor(private renderer: Renderer) {}ngAfterViewInit() {this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');}}
当需要获取用户映射到组件里的某个元素时
@ContentChildren配合 li 选择器指令
介绍一个好方案，用@Directive装饰器，配合他的 selector 功能。定义一个能查找/选择<li>元素的指令，然后用@ContentChildren过滤用户映射进当前组件里的内容，只留下符合条件的 li 元素。
@ContentChildren配合@Directive(推荐)
// user code<my-list><li *ngFor="#item of items"> {{item}} </li></my-list>@Directive({selector: 'li' })export class ListItem {}// component code@Component({selector: 'my-list'})export class MyList implements AfterContentInit {@ContentChildren(ListItem) items: QueryList<ListItem>;ngAfterContentInit() {// do something with list items}}
原文查看
