十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
前言
创新互联长期为上1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为梅州企业提供专业的做网站、成都网站制作,梅州网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的CheckBox,我们想获取到被选中的CheckBox,然而这些CheckBox是通过循环产生的,我们无法给每一个CheckBox指定一个ID,这个时候可以通过操作DOM来实现。angular API中包含有viewChild,contentChild等修饰符,这些修饰符可以返回模板中的DOM元素。
指令中的DOM操作
@Directive({ selector: 'p' }) export class TodoDirective{ constructor(el: ElementRef, renderer: Renderer){ renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'red'); } }
以上声明了一个指令,使用是需要在module中的declarations中声明。该指令的作用是将p元素的backgroundColor设置为red。
-ElementRef是一个允许直接获取DOM元素的一个类,该类包含一个nativeElement属性。当不允许直接操作原生DOM元素时,该属性值为null。
-Renderer该类包含大量可以用来操作DOM原生的方法。
@ViewChild和@ViewChildren
每一个组件都有一个视图模板,通过 template或templateUrl引入。想要获取视图模板中的DOM元素则可以使用@ViewChild和@ViewChildren修饰符。他们可以接受模板变量或元素标签或模板类名来获取DOM节点。@ViewChild返回ElementRef类引用(获取组件时则直接使用组件类名),而@ViewChildren返回QueryList
。
//模板内容{{ item.name }}
//组件中获取DOM @ViewChildren('name') todoNames: QueryList; @ViewChild('name') todoName: ElementRef; ngAfterViewInit(){ this.todoNames.forEach(e=>console.log(e.nativeElement.innerText)); console.log(this.todoName.nativeElement.innerText); }
@ViewChild('name')和@ViewChildren('name')
通过name模板变量获取p标签DOM节点,可以在ngAfterViewInit声明周期钩子中获取节点信息,当然也可以在其他函数中,只要保证视图完成初始化即可。
QueryList是一个不可变的列表,其存在一个名为changes的Observable变量,因此可以被订阅,结合notifyOnChanges方法,可以实时查看QueryList中变量的变化。调用notifyOnChanges函数后,当组件的输入发生变化时会触发Observable发出新的值,这样当todoNames: QueryList
有更新时,便能通过下面代码查看到变化:
this.todoNames.changes.subscribe(data => data._results.forEach( e=>console.log(e.nativeElement.innerText))); this.todoNames.notifyOnChanges();
@ContentChild和@ContentChildren
看着与@ViewChild和@ViewChildren很相似,但@ContentChild和@ContentChildren是获取组件标签中的内容的,懒得写例子,这里直接贴上angular中文官网的一个例子:
import {Component, ContentChildren, Directive, Input, QueryList} from '@angular/core'; @Directive({selector: 'pane'}) export class Pane { @Input() id: string; } @Component({ selector: 'tab', template: `panes: {{serializedPanes}}` }) export class Tab { @ContentChildren(Pane) panes: QueryList; get serializedPanes(): string { return this.panes ? this.panes.map(p => p.id).join(', ') : ''; } } @Component({ selector: 'example-app', template: ` `, }) export class ContentChildrenComp { shouldShow = false; show() { this.shouldShow = true; } }
可以看出@ContentChildren(Pane) panes: QueryList
获取的是组件Tab中的内容:
与@ViewChild类似@ContentChild获取的是第一个Pane指令,获取DOM元素后,可以采用类似的方式处理。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家创新互联的支持。