Angular Ref

一、获取DOM元素

给标签起一个名字

<p #pone>ref</p>

在ts里引入ElementRef、ViewChild ，然后操作DOM

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
@ViewChild('pone',{static:false})
pone: ElementRef;
ngAfterViewInit() { //初始化完组件视图及其子视图之后
    this.pone.nativeElement.style.color = "skyblue"
    this.pone.nativeElement.innerHTML = "什么也不是"
}

二、Renderer2获取DOM

import { Component, OnInit, ElementRef, ViewChild, Renderer2 } from '@angular/core';
@ViewChild('pone',{static:false})
pone: ElementRef;
constructor(private elementRef: ElementRef, private renderer: Renderer2) { }
ngAfterViewInit() { //初始化完组件视图及其子视图之后
    this.renderer.setStyle(this.aaa.nativeElement, 'color', 'skyblue');
}

更多Renderer2的API

export abstract class Renderer2 {
 abstract createElement(name: string, namespace?: string|null): any;
 abstract createComment(value: string): any;
 abstract createText(value: string): any;
 abstract setAttribute(el: any, name: string, value: string,
 namespace?: string|null): void;
 abstract removeAttribute(el: any, name: string, namespace?: string|null): void;
 abstract addClass(el: any, name: string): void;
 abstract removeClass(el: any, name: string): void;
 abstract setStyle(el: any, style: string, value: any, 
 flags?: RendererStyleFlags2): void;
 abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void;
 abstract setProperty(el: any, name: string, value: any): void;
 abstract setValue(node: any, value: string): void;
 abstract listen(
   target: 'window'|'document'|'body'|any, eventName: string,
   callback: (event: any) => boolean | void): () => void;
}