Angular 4.引用元素和应用样式

时间:2017-07-19 19:55:47

标签: angular typescript

如何引用具有相同#attribute的一组元素,将样式应用于

<div #slide></div>
<div #slide></div>

我已尝试使用ViewChildren, ViewChild and ElementRef

@ViewChildren('slide') slides:ElementRef;
ngOnInit($window, scope): void {console.log(this.slides)}

但它会记录undefined

2 个答案:

答案 0 :(得分:2)

它不起作用,因为ngOnInit循环调用尽快组件实例化&amp;在将Component html加载到DOM树之前。你应该在ngAfterViewInit生命周期钩子里面做,因为它确保了内在的内容和组件被加载到DOM中。

ngAfterViewInit(): void {
    console.log(this.slides)
}

答案 1 :(得分:0)

根据您的使用案例,您可能需要研究创建自定义指令以完成任务。在那里,您将使用主机绑定。它可能最终变得更干净,因为你无论如何都要将ID放在整个地方,你可以让它在那个父组件之外重复使用。