Angular2 @Input undefined при попытке привязки к строковой константе

Возможно, это нормальное поведение, делая тест, this.myColor Это undefined, но почему? Эта ошибка неверна в моем коде:

<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(){

    }
}

Вы можете переместить мышь над "Тест" и посмотреть в консоли

Plunker

Ответы

Ответ 1

Вы должны заключить привязку своего ввода в простые кавычки, например

[myColor]="'red'"

Это привяжет строку red к myColor. Если вы удалите простые кавычки, он будет искать свойство класса с именем red, которое не существует, поэтому оно возвращает undefined

Вы можете сделать это, как я упоминал выше, или вы можете создать свойство класса с именем red. В этом случае он будет привязан к свойству класса.

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

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

Edit

Я забыл упомянуть, что доступ к DOM через nativeElement не рекомендуется. Вы должны использовать Renderer, @HostBinding или host в @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);
}

Ответ 2

Более простой способ привязки статического текста -

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

См. Angular2 документация в разделе "Инициализация однократной строки".

Plunker