在父组件内引用子组件的


引用多个的状况。QueryList是一个泛型

 html

实战

选取图片。图片是ngFor循环 会有多个

使用@ViewChildren




在组件初始化里面输出看一下

在ngOnInit里面第一个打印出来，第二个没有打印出来。

这就是angular的生命周期了。 ngOnInit的时候视图其实尚未真正的渲染好。咱们在ngOnAfterViewInit里面打印这个imgs对象，



数组当中有5个元素

视图在ngOnAfterViewInit内是彻底渲染好的，是能够安全的使用它。那么下面单个element为何能够在ngOnInit输出呢？并不说在ngOnInit内就是不行，在某种状况下ngOnInit也是能够获得视图中的元素。可是很是安全的一点是在ngOnAfterViewInit中去作。
并非说在ngOnInit中就是不行，可是在ngOnAfterViewInit中就必定行。


conole内输出了各个各个生命周期的函数，影响咱们的显示，把这些生命周期的 去掉先。


生命周期的相关方法删除

OnInit也不要了

删除

再看最终的输出 相对清晰一下

获得了images的一组对象，循环


数组

直接操做dom。Renderer2

在构造函数内注入。Renderer2

他会在上面自动引入。在angular/core的包里面


循环操做图片的高度
安全

把上面原来直接操做dom的代码删掉

若是容许直接操做dom，会引发一些注入攻击。用rd2去操做dom会增长安全性。rd2操做以前会作验证。
app

@ViewChild引用angular的组件

在app.component.html内给子组件起个别名

使用@ViewChild引用


在ngAfterViewInit内输出这个对象。


、
一个属性是子组件的imgSilder属性。

这四个和子组件内属性都是对应的


若是是angular的组件的话，能够直接这么写

htm内的别名就能够去掉。

输出的结果是同样的
 

因此在@ViewChild中不单能够起别名，也能够经过属性，组件的类型或者指令来去选择，前提是它是一个angular的组件或者指令。
dom

总结