有什么好的替代品在访问使用Angular2的nativeElement DOM？

本文介绍了有什么好的替代品在访问使用Angular2的nativeElement DOM？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以例如下面code，这是很好的选择，以访问利用nativeElement DOM的

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 for you test more easy.

推荐答案

由于通过 nativeElement 直接访问到DOM不鼓励你有三个选择

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';
}

使用 @HostBinding （这种情况下将设置颜色立刻）

Using @HostBinding (this case will set the color immediatly)

@HostBinding('style.background-color') get color {
    return this.myColor;
}

mouseEnter(){
    this.myColor = 'blue';
}

使用渲染（用这个来代替 nativeElement.style ='值'）

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);
}

注意主机和 @HostBinding 是等价的。

这篇关于有什么好的替代品在访问使用Angular2的nativeElement DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

NativeElement