在Angular 2中执行DOM操作的正确方法+

对文档美学(如页面导航)的任何更改 (routing) ,项目选择 (ngIf) (ngFor) 等等 DOM Manipulation . 可以是 property event reference 处理。

DOM操作

1. EVENT BINDING

   信息的流动 elements 在组件中添加到相应组件的 class (HTML Template to TS) . 事件绑定无需定义 template reference variable. 这是操作DOM元素的最好和最简单的方法。 () 表示 event binding

   下面是我们示例的片段:

   <button (click)="changeColour()" [ngStyle]="{'background-color': buttonColor}">BUY NOW</button>
   

   TS

   buttonColor : string = 'grey'
   changeColour() {
       this.buttonColor = 'purple'
   }
   

   particular event ,例如何时 enter key is pressed , mouse clicked 或者 combination of keys is pressed

   下面是我们示例的片段:

   HTML

   <button (keyup.control.shift.enter)="changeColour()" [ngStyle]="{'background-color': buttonColor}">BUY NOW</button>
   

   colour purple 什么时候 Ctrl+Shift+Enter 压力很大。

2. @HostListener and @HostBinding :

   property binding 有棱角的。

   @HostBinding('value') val; 与 [value]="val"

   和 @HostListener('click') click(){ } (click)="click()" .

   @HostBinding @HostListener 定义在 directive [] 和 () component template .

   下面是我们示例的片段:

   <button class="c_highlight">BUY NOW</button>
   

   (host.directive.ts)

   @Directive({
       // Notice the . in selector => this directive will work for DOM with the c_highlight class 
       selector: '.c_highlight'
    })
   
    export class HostDirective {
   
        @HostBinding('style.backgroundColor') c_color = "red"; 
   
        @HostListener('click') c_onclick() {
            this.c_color = "purple" ;
        }
    } 
   

3. Renderer2 :

   这基本上是一个问题 wrapper 越过 browser API for DOM Manipulation across platforms own Renderer2 implementation ,平台所独有的。有多种DOM操作 methods 为同样的人送礼 setStyle() , createElement() , createText() , appendChild() custom 方法也一样。这类似于 template reference variable 在您的示例中,我们使用 到元素到 modify 它的 properties .

   下面是我们示例的片段:

   <button (click) = "onClick()" #abcd>BUY NOW</button>
   

   TS

   @ViewChild('abcd') 
   private abcd: ElementRef;   
   constructor(private renderer: Renderer2) {
   }
   onClick() {
       this.renderer.setStyle(this.abcd.nativeElement, 'backgroundColor','purple');
   }
   

   阅读更多- https://angular.io/api/core/Renderer2

4. Template Reference Variable :

   这涉及到创建一个 id (reference) jquery 一种方法,其中每个元素可以有一个 id 可以使用 getElementById()

   HTML

   <button (click)="changeColour()" id="buy-now">BUY NOW</button>
   

   changeColour() {
       const b = <HTMLElement>document.querySelector('#buy-now');
       b.style.backgroundColour = 'purple'
   }
   

5. fromEvent() 从…起 rxjs 这类似于定义 Event Listener 在一个元素上。这个 fromEvent 方法创建一个 Observable 它发出来自给定元素的特定类型的事件。只有 对于必须声明的元素;这项活动是 associated

   HTML

   <button #abcd>BUY NOW</button>
   

   TS

   @ViewChild('abcd') 
   private abcd: ElementRef;   
   ngOnInit(){
       fromEvent(this.abcd.nativeElement, 'click').subscribe(res => this.abcd.nativeElement.style.backgroundColor = 'purple');
   }
   

   总结

   所用技术的选择 DOM操作 完全取决于 developer . 每种方法都有自己的特点 benefits trade-offs ; 与事件绑定类似, performance 当一个大的列表被修改为 change detection cycle best angular practices 像这样 avoid creating references 对于可能有风险且可能使您的应用程序更复杂的元素 vulnerable XSS 正如@Chellapan所指出的攻击。

根据角度文档,使用元素Ref是易受攻击的

易受XSS攻击。仔细检查ElementRef在中的任何用法 你的密码。有关更多详细信息,请参阅《安全指南》。

在模板中创建一个模板引用,并将其传递给ChangeColor方法,然后使用Renderr2服务,该服务提供setStyle方法来设置元素的样式

component.html

<button #button (click)="changeColour(button)">BUY NOW</button>

constructor(private renderer: Renderer2) { }

changeColour(element: HTMLElement) {
  this.renderer.setStyle(element.nativeElement, 'backgroundColour ', 'purple');
}

https://angular.io/api/core/ElementRef#security-risk

您可以使用 template reference variable

<button #btn (click)="btn.style.backgroundColor = 'purple'">BUY NOW</button>

也可以将变量传递给方法:

<button #btn (click)="changeColor(btn)">BUY NOW</button>

changeColour(element: HTMLElement) {
   element.style.backgroundColour = 'purple';
}

看见 this stackblitz 为了演示。