有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的复选框,我们想获取到被选中的复选框,然而这些复选框是通过循环产生的,我们无法给每一个复选框指定一个ID,这个时候可以通过操作DOM来实现.angular API中包含有viewChild, contentChild等修饰符,这些修饰符可以返回模板中DOM的元素。
@Directive ({
选择器:“p”
})
出口类TodoDirective {
构造函数(el: ElementRef,渲染器渲染器):{
renderer.setElementStyle (el。nativeElement,写成backgroundColor”、“红色”);
}
}
以上声明了一个指令,使用是需要在模块中的声明中声明。该指令的作用是将p元素的写成backgroundColor设置为红色。
-ElementRef是一个允许直接获取DOM元素的一个类,该类包含一个nativeElement属性。当不允许直接操作原生DOM元素时,该属性值为null。
渲染器该类包含大量可以用来操作DOM原生的方法。
每一个组件都有一个视图模板,通过模板或templateUrl引入。想要获取视图模板中DOM的元素则可以使用@ViewChild和@ViewChildren修饰符。他们可以接受模板变量或元素标签或模板类名来获取DOM节点.@ViewChild返回ElementRef类引用(获取组件时则直接使用组件类名),而@ViewChildren返回<代码> QueryList 。
//模板内容
& lt; p * ngFor=孟钅啃卸苹? name> {{item.name}} & lt;/p>//组件中获取DOM
@ViewChildren(“名字”)
todoNames: QueryList;
@ViewChild(“名字”)
todoName: ElementRef;
ngAfterViewInit () {
this.todoNames.forEach (e=祝辞console.log (e.nativeElement.innerText));
console.log (this.todoName.nativeElement.innerText);
}
<代码> @ViewChild(“名字”)和@ViewChildren(“名字”)通过名字模板变量获取p标签DOM节点,可以在ngAfterViewInit声明周期钩子中获取节点信息,当然也可以在其他函数中,只要保证视图完成初始化即可。
QueryList是一个不可变的列表,其存在一个名为变化的可观察到的变量,因此可以被订阅,结合notifyOnChanges方法,可以实时查看QueryList中变量的变化。调用notifyOnChanges函数后,当组件的输入发生变化时会触发的发出新的值,这样当<代码> todoNames: QueryList 有更新时,便能通过下面代码查看到变化:
this.todoNames.changes。订阅(data=https://www.yisu.com/zixun/> data._results.forEach (
e=> console.log (e.nativeElement.innerText)));
this.todoNames.notifyOnChanges ();
看着与@ViewChild和@ViewChildren很相似,但@ContentChild和@ContentChildren是获取组件标签中的内容的,懒得写例子,这里直接贴上角中文官网的一个例子:
进口{组件,ContentChildren、指令、输入,QueryList} ' @angular/核心”;
@Directive({选择器:“面板”})
出口类窗格{
@Input () id:字符串;
}
@ component ({
选择器:“选项卡”,
模板:
& lt; div>窗格:{{serializedPanes}} & lt;/div>
”
})
{出口类选项卡
@ContentChildren(面板)窗格:QueryList;
得到serializedPanes():{返回这个字符串。窗格& # 63;this.panes。地图(p=比;p.id)。加入(" "):”;}
}
@ component ({
选择器:“范例应用”,
模板:
& lt; tab>
& lt;窗格id=" 1 "祝辞& lt;/pane>
& lt;窗格id=" 2 "祝辞& lt;/pane>
& lt;窗格id=?”* ngIf=皊houldShow祝辞& lt;/pane>
& lt;/tab>
& lt;按钮(点击)=?)”的在显示3 & lt;/button>
”,
})
出口类ContentChildrenComp {
shouldShow=false;
显示(){。shouldShow=true;}
}
可以看出<代码> @ContentChildren(面板)窗格:QueryList; 获取的是组件选项卡中的内容:
& lt; tab>
& lt;窗格id=" 1 "祝辞& lt;/pane>
& lt;窗格id=" 2 "祝辞& lt;/pane>
& lt;窗格id=?”* ngIf=皊houldShow祝辞& lt;/pane>
& lt;/tab>
与@ViewChild类似@ContentChild获取的是第一个窗格指令,获取DOM元素后,可以采用类似的方式处理。
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家的支持。
