angular——获取 DOM 元素

当需要获取当前组件模版里的某一个元素时

@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
  }
}

原文查看