Question

我正在使用Angular 2并且是新手。我想调用一个小按钮单击功能。所以我尝试这样做（也许是我来自React背景的bcos）：

<button class="btn btn-primary" (click)="(() => { console.log('hi') })()">
  Click Me
</button>

我在(click)属性中使用了IIFE。但它没有用。为什么它不起作用，有没有其他方法来声明一个匿名函数并在按钮点击时调用它？我真正想要做的是分配一个这样的值：(val) => { value = val }

Answer 1

如果您只提供要让Angular评估的表达式，这样可以正常工作。如果您的组件上有属性，例如value，您可以使用以下内容：

<button class="btn btn-primary" (click)="value = 'hi'">
    Click Me
</button>

Angular实际上只是调用您提供的代码，就像它在函数内部一样（这是一个很大的简化，但适用于您的目的）。

Answer 2

把这个留给未来的观众：

我发现 this documentation 表明支持的语法是有限的（并非每个有效的 Javascript 语句都有效）

<块引用>

与模板表达式一样，模板语句使用一种看起来像 JavaScript 的语言。但是，模板语句的解析器不同于模板表达式的解析器。此外，模板语句解析器特别支持基本赋值、= 和带分号、; 的链接表达式。 不允许使用以下 JavaScript 和模板表达式语法： new、递增和递减运算符，++ 和 -- 运算符赋值，例如 += 和 -= 按位运算符，例如 |和＆管道操作员

Answer 3

在Angular中，当你调用任何函数时，它会在component.ts文件中检查该特定函数。

因此，例如，当您调用控制台时，它将查找一个名为console的对象，其中log作为相应component.ts文件中该对象的函数，因此控制台将未定义。

您可以在组件文件中创建一个名为log的函数，然后在模板中随意调用它。

component.ts

log(value) {
    console.log(value);
}

html模板

<button class="btn btn-primary" (click)="log('message')">

点击我

为什么我不能在Angular模板中定义内联函数？怎么办呢？

3 个答案: