控制属性值的评估

Question

以下代码有效（以任何拼写错误为模——实际代码要复杂得多）。当您单击包含该指令的 DOM 元素时，表达式的值会显示在警报中。

@Directive({selector: '[alertOnClick]'})
export class AlertOnClick implements OnDestroy {
  @Input('alertOnClick') clickFunction: (() => string);

  @HostListener('click')
  onClick() {
    alert(this.clickFunction());
  }
}

问题是，它必须像这样调用：

<button [alertOnClick]="() => String(new Date())">Time</button>

编辑：Angular 解析器似乎不支持匿名函数。它必须通过命名控制器上的函数来调用。

我想更自然地调用它，像这样：

<button [alertOnClick]="String(new Date())">Time</button>

但是，如果有任何类似的变化，无论何时单击按钮，都会显示相同的时间，即呈现页面的时间。我一生都无法弄清楚如何在我喜欢的时间而不是在呈现页面时评估表达式。有什么建议吗？

Answer 1

有两种可能的方式来创建 args：

• <button [alertOnClick]="method(new Date())">Time</button> 在渲染/更改检测期间仅创建一次 Date 对象。

• <button [alertOnClick]="method(createDate())">Time</button> - 在每次更改检测 + 实际函数调用时多次创建 Date 对象。

可以使用工厂函数/类型构造函数以受控方式创建 args：<button [alertOnClick]="method(createDate/Date)">Time</button> 和内部 method 将被调用 createDate() 或 new date()。可用的解决方案，但不方便。

另一种方法是编写纯自定义args 管道：<button [alertOnClick]="method|args:[Date,new Date()]">Time</button>。此管道创建包装函数，该函数可以在函数调用时创建参数。您可以控制哪些值应创建一次，哪些值应仅在函数调用期间创建。示例：

@Pipe({name: 'args', pure: true})
export class ArgsPipe implements PipeTransform {
  transform(method: Function, parameters: any[]): Function {
    return ()=> {
       const args = parameters.forEach(arg => {
            if(typeof arg === 'function') {
                return arg();
            }
            return arg;
       });
       //todo: figure out how to get correct this
       method.apply(this, args);
    };
  }
}

您可能还需要一个管道来禁用对函数参数的评估，它会将它们转换为() => functionArgument：<button [alertOnClick]="method|args:[someCallback|func,new Date()]">Time</button> - 在这种情况下，someCallback 函数将被传递给 method 而无需调用。

Answer 2

表达式评估

我想更自然地调用它，像这样：
<button [alertOnClick]="String(new Date())">Time</button>

这在我看来像是后期表达式评估，可以用

来实现

<p alertOnClick="String(new Date())">Current time</p>

@Directive({selector: '[alertOnClick]'})
export class AlertOnClick {
  @Input('alertOnClick') message: String;

  @HostListener('click')
  onClick() {
    alert(eval(this.message));
  }
}

发生的情况是在编译时alertOnClick 属性被赋予表达式的字符串版本，然后在运行时 Javascript eval (ref MDN web docs) 正在评估字符串。

但是当然，由于绑定，这可能会因您的“副作用”代码而失败。即 eval 只工作，因为 String 和 Date 是语言内置的。
了解您的副作用是什么会很有趣。

你也可以调用你自己定义的全局函数

const evalMe = () => { return String(new Date()) }

<p alertOnClick="evalMe()">Current time</p>

@Directive({selector: '[alertOnClick]'})
export class AlertOnClick {
  @Input('alertOnClick') message: String;

  @HostListener('click')
  onClick() {
    alert(eval(this.message));
  }
}

这会将可能导入的纯 JavaScript 库纳入范围。

方法评价

“Angular 方式”是传递方法名称以供将来评估。
这在很多地方都有显示，所以我很惊讶你在你的示例 plunker 中没有得到它。 （参考：Angular2 passing a function to a directive via attribute）

<p [alertOnClick]="evalMethod">Current time</p>

export class App {
  ...    
  evalMethod() {
    console.log("I am being called!")
    return new Date();
  }


@Directive({selector: '[alertOnClick]'})
export class AlertOnClick {
  @Input('alertOnClick') messageFn: Function;

  @HostListener('click')
  onClick() {
    alert(this.messageFn());
  }
}

这取决于表达式的来源，以及是否可以在组件方法中完成任何所需的绑定。
至少，您有更多的绑定范围，因为您已经有效地从模板中删除了表达式。

这是工作的Plunker