Angular开辟实践(七): 跨平台操作DOM及渲染器

2019-05-25 07:23栏目:ca888圈内

图片 1

获取元素

@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

@ViewChild('demoDiv') demoDiv: ElementRef; // @ViewChild通过模板变量名获取

ngAfterViewInit() {
    console.log('DIV的id:'   this.demoDiv.nativeElement.id); // DIV的id:demoDiv
}

在组件类中,我们通过 @ViewChild 获取到包装有 div 的 DOM 对象的 ElementRef 对象,ElementRef 定义如下:

class ElementRef<T> {
  constructor(nativeElement: T)
  nativeElement: T
}

因此我们可以在 ngAfterViewInit 中通过 this.demoDiv.nativeElement 获取到该 div 的 DOM 对象,然后获取元素的id。

总结

  

模板的概念应该是大多数Web开发人员熟悉的。在整个应用程序的视图中重复使用一组DOM元素。在HTML5标准引入了template标签之前,大多数都是用下面这种方式实现,增加type属性:

这样就引出了 Angular 主要特性之一:横跨所有平台。通过合适的方法,使用 Angular 构建的应用,可复用在多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。

图片 2

 3、@viewChildren --   You can use ViewChildren to get the {@link QueryList} of elements or directives from theview DOM.

  @viewChild会返回符合条件的第一个元素,如果需要获取多个符合条件的元素呢?@viewChildren会返回所有符合条件的元素的list。指定selector的方式与@viewChild一致。

// 复制一个元素
  <div class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </div>
  <div class="tip-test-wrapper">
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
  </div>
</div>
<app-dialog></app-dialog>
<app-dialog></app-dialog>

// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

  @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild('testdom') viewelement: ElementRef;
  @ViewChildren('testdom') viewelements: QueryList<any>;

  @ViewChild(DialogComponent) viewcontent: DialogComponent;
  @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    // console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
    // console.dir(this.viewcontainer);
    console.dir(this.viewelement);
    console.dir(this.viewelements);
    console.dir(this.viewcontent);
    console.dir(this.viewcontents);
  }

  图片 3

 

@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>有更新时,便能通过下面代码查看到变化:

为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异。比如定义了抽象类 Renderer2 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。通过 模板变量@ViewChild 等方法获取DOM元素。

import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild, Renderer2 , ViewChildren, QueryList} from '@angular/core';

import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
 selector: 'app-test-page',
 templateUrl: './test-page.component.html',
 styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

 @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
 @ViewChild('testdom') viewelement: ElementRef;
 @ViewChildren('testdom') viewelements: QueryList<any>;
 @ViewChild(DialogComponent) viewcontent: DialogComponent;
 @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

 constructor(
 private render: Renderer2,
 private el: ElementRef
 ) { }

 ngOnInit() {
 }

 getDomTest() {
 // 修改元素颜色
 this.render.setStyle(this.viewelement.nativeElement , 'color' , 'red');
 }
}

  无奈接手了一个旧项目,上一个老哥在Angular项目中大量使用了JQuery来操作DOM,真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢?

ngAfterViewInit(): void {
    // outputs `template bindings={}`
    console.log(this.vc.element.nativeElement.textContent);
}

获取组件中的div

在Angular应用中不应该通过原生 API 或者 jQuery 来直接获取DOM元素:

let element1 = document.getElementById("demoDiv"); // jQuery获取: $('#demoDiv')

而是应该通过Angular提供的方法来获取DOM元素:

@viewChild会返回符合条件的第一个元素,如果需要获取多个符合条件的元素呢? @viewChildren会返回所有符合条件的元素的list。 指定selector的方式与@viewChild一致。

  1、ElementRef  ---   A wrapper around a native element inside of a View.

    在组件的 constructor中注入ElementRef,可以获取到整个组件元素的包裹。

@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    console.dir(this.el);
  }
}

图片 4

  ElementRef中的nativeElement即是组件最外层的DOM元素。再通过原生的DOM定位方式,即可获取到指定的selector元素。

  getDomTest() {
    console.dir(this.el.nativeElement.querySelector('.test-get-dom')); // 获取指定的子元素
  }

constructor(private injector: Injector,
private r: ComponentFactoryResolver) {
let factory = this.r.resolveComponentFactory(ColorComponent);
let componentRef = factory.create(injector);
let view = componentRef.hostView;
}
ViewContainerRef

为了演示,先定义一个组件DemoComponent:

ElementRef中的nativeElement即是组件最外层的DOM元素。再通过原生的DOM定位方式,即可获取到指定的selector元素。

操作DOM  --- Renderer2

  在获取dom之后,如何对dom进行操作呢?原生的domAPI是一种选择,但是Angular提供了更好的跨平台方式   Renderer2。

  引入 Renderer2  , 然后在construct中注入。

import { Component, OnInit , ViewContainerRef , ElementRef , ViewChild,  Renderer2 , ViewChildren, QueryList} from '@angular/core';

import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {

  @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild('testdom') viewelement: ElementRef;
  @ViewChildren('testdom') viewelements: QueryList<any>;
  @ViewChild(DialogComponent) viewcontent: DialogComponent;
  @ViewChildren(DialogComponent) viewcontents: QueryList<DialogComponent>;

  constructor(
    private render: Renderer2,
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    // 修改元素颜色
    this.render.setStyle(this.viewelement.nativeElement , 'color' , 'red');
  }
}

  renderer2提供了丰富的API供使用,如下:

图片 5

ViewRef

操作组件中的div

在上面通过几种方式获取到 div 的 DOM 对象,那么我们要如果对它进行操作呢(设置样式、属性、插入子元素等)?通过原始API 或者 jQuery 肯定是不允许的了。

这样我们就引出Angular抽象类 Renderer2 来对元素进行设置样式、属性、插入子元素等操作。

Renderer2 的定义如下:

class Renderer2 {
    get data: {...}
    destroyNode: ((node: any) => void) | null
    destroy(): void
    createElement(name: string, namespace?: string | null): any // 创建元素
    createComment(value: string): any // 创建注释元素
    createText(value: string): any // 创建文本元素
    appendChild(parent: any, newChild: any): void // 添加子元素(在最后)
    insertBefore(parent: any, newChild: any, refChild: any): void // 添加子元素(在最前)
    removeChild(parent: any, oldChild: any): void // 移除子元素
    selectRootElement(selectorOrNode: string | any): any // 获取根元素
    parentNode(node: any): any // 获取父元素
    nextSibling(node: any): any // 获取下一个兄弟元素
    setAttribute(el: any, name: string, value: string, namespace?: string | null): void // 设置属性
    removeAttribute(el: any, name: string, namespace?: string | null): void // 移除属性
    addClass(el: any, name: string): void // 添加样式类
    removeClass(el: any, name: string): void // 移除样式类
    setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void // 设置样式
    removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void // 移除样式
    setProperty(el: any, name: string, value: any): void // 设置DOM对象属性,不同于元素属性
    setValue(node: any, value: string): void // 设置元素值
    listen(target: 'window' | 'document' | 'body' | any, eventName: string, callback: (event: any) => boolean | void): () => void // 注册事件
}

因此,我们想改变 div 的背景色,就可以这样做:

ngAfterViewInit() {
    this.renderer.setStyle(this.demoDiv.nativeElement, 'background-color', 'red'); // 通过Renderer2设置div的css样式background-color
}

您可能感兴趣的文章:

  • Angular2学习教程之组件中的DOM操作详解
  • Angular.JS通过指令操作DOM的方法
  • AngularJS中的DOM操作用法分析

总结

  通过elementRef或者@viewChild @viewChildren获取元素,再通过renderer2提供的API来操作元素。不过记得在不要在 ngAfterViewInit 周期之前使用。通过Angular提供的方式,可以满足大部分的操作DOM的需求了。如果有特殊的场景,当然还是原生DOM撸起来呀

 

//组件中获取DOM
@ViewChildren('name')
todoNames: QueryList<ElementRef>;

import { AfterViewInit, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
    template: `
        <div id="demoDiv" #demoDiv>this is DIV!</div>
        DIV的id:{{demoDiv.id}} <!-- DIV的id:demoDiv -->
    `
})
export class DemoComponent implements AfterViewInit {
    @ViewChild('demoDiv') demoDiv: ElementRef; // @ViewChild通过模板变量名获取

    constructor(private renderer: Renderer2) {
    }

    ngAfterViewInit() {
        console.log('DIV的id:'   this.demoDiv.nativeElement.id); // DIV的id:demoDiv
        this.renderer.setStyle(this.demoDiv.nativeElement, 'background-color', 'red'); // 通过Renderer2设置div的css样式background-color
    }
}

2、@viewChild()  ---    You can use ViewChild to get the first element or the directive matching the selector from the  view DOM.

  2、@viewChild()  ---    You can use ViewChild to get the first element or the directive matching the selector from the  view DOM. 

    @viewChild可以获取指定的元素, 指定的方式可以是本地变量或者组件类型;

// HTML
<div class="tip-test-wrapper">
   // 本地变量绑定button按钮
    <button class="test-get-dom" #testdom (click)="getDomTest()">测试获取DOM</button>
 </div>
  // Dialog组件
<app-dialog></app-dialog>


// ts
import { DialogComponent } from './../../common/components/dialog/dialog.component';


@Component({
  selector: 'app-test-page',
  templateUrl: './test-page.component.html',
  styleUrls: ['./test-page.component.scss']
})
export class TestPageComponent implements OnInit {
  // 通过本地变量获取元素  可通过read来指定获取的元素类型
  @ViewChild('testdom' , { read: ViewContainerRef }) viewcontainer: ViewContainerRef;
  @ViewChild('testdom') viewelement: ElementRef;

  // 通过组件类型来获取
  @ViewChild(DialogComponent) viewcontent: DialogComponent;

  constructor(
    private el: ElementRef
  ) { }

  ngOnInit() {
  }

  getDomTest() {
    // console.dir(this.el.nativeElement.querySelector('.test-get-dom'));
    console.dir(this.viewcontainer);
    console.dir(this.viewelement);
    console.dir(this.viewcontent);
  }
}

  图片 6

  备注:ElementRef或者 @viewChild 获取元素,一定要在 ngAfterViewInit 周期之后再使用。 

 

@Component({
selector: 'sample',
template: I am first span <ng-container #vc></ng-container> I am last span
})
export class SampleComponent implements AfterViewInit {
@ViewChild("vc", {read: ViewContainerRef}) vc: ViewContainerRef;

模板变量

<div id="demoDiv" #demoDiv>this is DIV!</div>
DIV的id:{{demoDiv.id}} <!-- DIV的id:demoDiv -->

在组件模板中,我们在 div 上定义了 #demoDiv 的模板变量,那么 demoDiv 就等于该 div 的 DOM 对象,因此我们可以通过 demoDiv.id 直接获取 div 的 id。

版权声明:本文由ca888发布于ca888圈内,转载请注明出处:Angular开辟实践(七): 跨平台操作DOM及渲染器