Angular 2将输入绑定到函数调用

Question

在子组件中，绑定@Input()属性到父组件的函数调用是否可行？例如：

<navigation 
        [hasNextCategory]="hasNextCategory()"
        [hasPreviousCategory]="hasPreviousCategory()"
        (nextClicked)="nextCategory()"
        (previousClicked)="previousCategory()"
        (submitClicked)="submit()"
</navigation>

这似乎有效，但我想知道是怎么做到的。当组件触发事件时，这些输入是否重新评估，或者什么驱动了输入绑定？

- Tuomas Toivonen

Answer 1

当然。每当变更检测运行时，该函数被调用并将函数调用的结果分配给输入属性。

在devMode中，如果2个连续的调用返回不同的值，则会出现异常。

hasNextValue() {
  return {};
}

异常：表达式已更改...

不建议将绑定函数。相反，将结果分配给属性并绑定到该属性。 如果您知道自己在做什么，那就没问题。

更新

因此根据某些内部状态返回 true / false 是不允许的？奇怪，我的导航依然可以正常工作

实际上是允许的。如果您的状态由于某个事件（单击、超时等）而改变，则 Angular 变更检测会检测到这些更改。如果 Angular 变更检测两次调用该方法（在 devMode 中），但没有发生任何事件，则它不会期望有更改，并抛出上述异常。Angular 不喜欢的是变更检测本身引起的更改。

以下示例也会导致异常，因为变更检测本身会修改组件状态（this.someState =！this.someState;），这是不允许的。

someState:boolean = false;
hasNextValue() {
  this.someState = !this.someState;
  return this.someState;
}

即使之间没有事件发生，两次连续的调用将分别返回false和true。

不过，这个例子会正常工作。

someState:boolean = false;

@HostListener('click') {
  this.someState = !this.someState;
}

hasNextValue() {
  return this.someState;
}

因为连续两次调用（没有任何事件发生在中间），会返回相同的值。

- Günter Zöchbauer

---

你的意思是返回不同类型的值吗？ - Tuomas Toivonen

不，它们是不同的实例或值。以上代码每次调用都返回一个新对象，如果使用 === 进行比较（就像 Angular 变更检测一样），即使具有相同的形状，也会与之前的对象不同。 - Günter Zöchbauer

返回true/false根据某些内部状态是不允许的？奇怪，我的导航仍然正常工作。 - Tuomas Toivonen

我更新了我的回答，因为它太长了，不适合作为评论。希望这样更清楚明白。 - Günter Zöchbauer