如何从结构指令

Question

我创建了一个结构 SpinnerDirective，我这样使用：

<div *spinner="'spinner1'" spinnerMessage="Loading many things...">
  <p>Hide this while loading...</p>
</div>

该指令的代码如下所示：

@Directive({
  selector: '[spinner]'
})
export class SpinnerDirective {
  private _defaultMessage = 'Loading...';

  @Input('spinner') spinnerName: string;

  @Input('spinnerMessage') set message(messageStr: string){
    console.log('setting message of', messageStr);
    this._defaultMessage = messageStr || this._defaultMessage;
  }

  // ...
}

问题：永远不会调用setter方法（set message）。

我怀疑这是因为Angular“desugars”我的模板如下：

<template [spinner]="'spinner1'">
  <div spinnerMessage="Loading many things...">
    <p>Hide this while loading...</p>
  </div>
</template>

但我仍然不知道如何从指令中访问spinnerMessage。有什么想法吗？

Answer 1

结构指令语法应如下所示：

<div *spinner="'spinner1'; message: 'Loading many things...'">
  <p>Hide this while loading...</p>
</div>