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

Question

是否可以将子组件的@Input()属性绑定到父组件的函数调用上，例如：

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

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

Answer 1

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

当 2 次连续调用返回不同的值时，您会在 devMode 中遇到异常。喜欢

hasNextValue() {
  return {};
}

例外：表达式已更改...

不鼓励绑定到函数。而是将结果分配给一个属性并绑定到该属性。 如果你知道你在做什么，那很好。

更新

所以不允许根据某些内部状态返回真/假？奇怪的是我的导航仍然有效

这实际上是允许的。如果您的状态由于某些事件（单击、超时、...）而发生变化，那么 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;
}

因为两个连续的调用（中间没有任何事件）将返回相同的值。