有时不得不面对一些需要在组件中直接操作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<ElementRef>。
//模板内容
<p *ngFor='let item of todos' #name>{{ item.name }}</p>
//组件中获取DOM
@ViewChildren('name')
todoNames: QueryList<ElementRef>;
@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<ElementRef>有更新时，便能通过下面代码查看到变化：
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: <div>panes: {{serializedPanes}}</div>
})
export class Tab {
@ContentChildren(Pane) panes: QueryList<Pane>;
get serializedPanes(): string { return this.panes ? this.panes.map(p => p.id).join(', ') : ''; }
}
@Component({
selector: 'example-app',
template: <tab> <pane id="1"></pane> <pane id="2"></pane> <pane id="3" *ngIf="shouldShow"></pane> </tab> <button (click)="show()">Show 3</button>,
})
export class ContentChildrenComp {
shouldShow = false;
show() { this.shouldShow = true; }
}
可以看出@ContentChildren(Pane) panes: QueryList<Pane>;获取的是组件Tab中的内容：
<tab>
<pane id="1"></pane>
<pane id="2"></pane>
<pane id="3" *ngIf="shouldShow"></pane>
</tab>
与@ViewChild类似@ContentChild获取的是第一个Pane指令，获取DOM元素后，可以采用类似的方式处理。
TemplateRef
模板的概念应该是大多数Web开发人员熟悉的。在整个应用程序的视图中重复使用一组DOM元素。在HTML5标准引入了template标签之前，大多数都是用下面这种方式实现，增加type属性：
<script>
let tpl = document.querySelector('#tpl');
let container = document.querySelector('.insert-after-me');
insertAfter(container, tpl.content);
</script>
<div class="insert-after-me"></div>
<ng-template id="tpl">
<span>I am span in template</span>
</ng-template>
Angular支持这种方法，并实现TemplateRef类来处理模板。以下是如何使用它：
@Component({
selector: 'sample',
template: <ng-template #tpl> <span>I am span in template</span> </ng-template>
})
export class SampleComponent implements AfterViewInit {
@ViewChild("tpl") tpl: TemplateRef<any>;
ngAfterViewInit() {
let elementRef = this.tpl.elementRef;
// outputs `template bindings={}`
console.log(elementRef.nativeElement.textContent);
}
}
Angular从DOM中删除模板元素，并在其位置插入注释。这是呈现时的样子：
<sample>
</sample>
TemplateRef类本身就是一个简单的类。It holds a reference to its host element in elementRef property and has one method createEmbeddedView。这个方法是非常有用的，因为它允许我们创建一个视图并以ViewRef的形式返回一个引用
ViewRef
Angular鼓励开发人员将UI视为Views的组合，而不是将其视为独立的HTML标记树。
Angular支持2种视图
Embedded Views which are linked to a Template
Host Views which are linked to a Component
Creating embedded view
ngAfterViewInit() {
let view = this.tpl.createEmbeddedView(null);
}
Creating host view
constructor(private injector: Injector,
private r: ComponentFactoryResolver) {
let factory = this.r.resolveComponentFactory(ColorComponent);
let componentRef = factory.create(injector);
let view = componentRef.hostView;
}
ViewContainerRef
表示可以附加一个或多个视图的容器。
首先要提到的是，任何DOM元素都可以用作视图容器。通常，ViewContainer与ng-container结合使用。ng-container会被渲染为一个注释，所以它不会在DOM中引入多余的html元素。以下是在组件模板的特定位置创建ViewContainer的示例：
@Component({
selector: 'sample',
template: <span>I am first span</span> <ng-container #vc></ng-container> <span>I am last span</span>
})
export class SampleComponent implements AfterViewInit {
@ViewChild("vc", {read: ViewContainerRef}) vc: ViewContainerRef;
ngAfterViewInit(): void {
// outputs `template bindings={}`
console.log(this.vc.element.nativeElement.textContent);
}
}
网友评论