在组件模板中使用 angular 2 指令未在更改时呈现

Question

以这个简单组件模板为例：

<div [tooltip]="text" [tooltipEnabled]="false">{{text}}</div>

请注意 tooltip 是一个很好用的指令，但是当我在其他组件模板中使用它时，我将 tooltipEnabled 更改为"true"，我认为该指令会注意到变化并采取行动，但事实并非如此。

我错过了什么？它只适用于第一次加载，之后的任何更改都不会生效？我可以看到指令代码运行，但它正在读取 tooltipEnabled 属性作为 false（第一次加载），而我在 html 中看到我确实将其更改为成为 true.

Answer 1

如果你能创建一个 plunker 就好了..

工作正常：https://plnkr.co/edit/zElHdyZ5jbPGx5rFtlFI?p=preview

@Directive({
  selector: '[tooltip]'
})
export class TooltipDirective {
  private _tooltipEnabled: boolean;

  @Input()
  set tooltipEnabled(val: boolean) {
    console.log('value changed', val);
    this._tooltipEnabled = val;

    this._elementRef.nativeElement.style.backgroundColor = val ? '' : 'red'; // use Renderer for manipulations!!
  }

  @Input() tooltip: string;

  constructor(private _elementRef: ElementRef) {}
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2 tooltip [tooltipEnabled]="toggleBool" (click)="toggleBool = !toggleBool">Hello {{name}} - click me</h2>
      <h2 tooltip [tooltipEnabled]="false">Should be red..</h2>
      <h2 tooltip [tooltipEnabled]="true">Should be white..</h2>
    </div>
  `,
})
export class App {
  name:string;

  public toggleBool = true;

  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

在组件模板中使用 angular 2 指令未在更改时呈现

Using angular 2 directive inside component template is not being rendered on a change

angular2-directives

angular2-template

angular2-components

angular