在Angular2中使用nativeElement访问DOM有哪些好的替代方法?(What are some good alternatives to accessing the DOM using nativeElement in Angular2?)
以下面的代码为例,它们是使用nativeElement访问DOM的好方法
import {Component, Directive, Input, ElementRef} from 'angular2/core'; @Directive({ selector: '[myDR]', host:{ '(mouseenter)' : ' mouseEnter()' } }) export class MyDi { @Input () myColor: string; constructor(private el:ElementRef) { } mouseEnter(){ this.el.nativeElement.style.backgroundColor = this.myColor; console.log(this.myColor); } }这是一款让您更轻松地测试的Plunker 。
Taking as an example the following code, which are good alternatives to accessing the DOM using nativeElement
import {Component, Directive, Input, ElementRef} from 'angular2/core'; @Directive({ selector: '[myDR]', host:{ '(mouseenter)' : ' mouseEnter()' } }) export class MyDi { @Input () myColor: string; constructor(private el:ElementRef) { } mouseEnter(){ this.el.nativeElement.style.backgroundColor = this.myColor; console.log(this.myColor); } }This is a Plunker for you test more easy.
最满意答案
由于不鼓励通过nativeElement直接访问DOM, nativeElement您有三个选项
使用host属性(这将立即设置颜色)@Directive({ host:{ '(mouseenter)' : ' mouseEnter()', '[style.background-color]' : 'myColor' } }) mouseEnter(){ this.myColor = 'blue'; } 使用@HostBinding (这种情况会立即设置颜色)@HostBinding('style.background-color') get color { return this.myColor; } mouseEnter(){ this.myColor = 'blue'; } 使用Renderer (使用此代替nativeElement.style = 'value' )constructor(public renderer: Renderer, public element: ElementRef) {} mouseEnter(){ this.renderer.setElementStyle(this.element.nativeElement, 'background-color', this.myColor); }请注意, host和@HostBinding是等效的。
Since accessing directly to DOM through nativeElement is discouraged you have three options
Using host property (this will set the color immediatly)@Directive({ host:{ '(mouseenter)' : ' mouseEnter()', '[style.background-color]' : 'myColor' } }) mouseEnter(){ this.myColor = 'blue'; } Using @HostBinding (this case will set the color immediatly)@HostBinding('style.background-color') get color { return this.myColor; } mouseEnter(){ this.myColor = 'blue'; } Using Renderer (use this instead of nativeElement.style = 'value')constructor(public renderer: Renderer, public element: ElementRef) {} mouseEnter(){ this.renderer.setElementStyle(this.element.nativeElement, 'background-color', this.myColor); }Note that host and @HostBinding are equivalent.
更多推荐
发布评论