angular - 控制属性值的评估

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 解析器似乎不支持匿名函数。它必须通过在 Controller 上命名一个函数来调用。

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

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

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

Answer 1

有两种可能的方法来创建参数:

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

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

可以使用工厂函数/类型构造函数以受控方式创建参数:<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无需调用。