Question

也许这是正常的行为，进行测试，this.myColor它未定义，但为什么？这个错误在我的代码中错了：

<h1 myDR [myColor]="red" > Test </h1>

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

@Component({
    selector: 'my-app',
    template: `<h1>Hello World Angular2</h1> 

              <h1 myDR [myColor]="red" > Test </h1>
              `,
    directives: [MyDi]
})

export class App {
    constructor(){

    }
}

您可以将鼠标移到＆＃34;测试＆＃34;并查看控制台

`Plunker`

Answer 1

您必须将输入绑定括在简单的引号中，例如

[myColor]="'red'"

这会将red字符串绑定到myColor。如果删除简单引号，它将查找名为red的类属性，该属性不存在，因此返回undefined

您可以按照我的说法进行操作，也可以创建名为red的类属性。在这种情况下，它将绑定到类属性。

@Component({
    template: `<h1 myDR [myColor]="red" > Test </h1>`
})

export class App {
    red: string = 'red';
}

修改

我忘了提到不鼓励通过nativeElement访问DOM。您应该使用host中的Renderer，@HostBinding或@Component属性（最后两个是等效的）。所以你还有三个选择

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

Answer 2

绑定静态文本的简单方法是

<h1 myDR myColor="red" > Test </h1>

请参阅“一次性字符串初始化”下的Angular2 documentation。

Plunker

尝试绑定到字符串常量时，Angular2 @Input未定义

`Plunker`

2 个答案: