使用Angular 2指令内部组件模板没有在更改上呈现

Question

以此简单组件模板为例：

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

请注意 tooltip 是一个指令，但是当我在其他组件模板中使用它时，当我更改 tooltipeNabled 为 "true"时，我认为该指令将不理解变化和行动，但事实并非如此。

我想念什么？它仅在首次负载上起作用，而此后任何更改都不会效果？我可以看到指示代码运行，但是它正在读取 tooltipeNabled proprety as 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}`
  }
}