Question

以simplae组件模板为例：

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

请注意工具提示是一个很好的指令，但是当我在其他组件模板中使用它时，我将 tooltipEnabled 更改为"true"，我认为该指令将改变并采取行动，但不是。

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

Answer 1

如果你能创造一个羽毛球会很棒..

工作正常：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指令不会在更改时呈现

1 个答案: