Question

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

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

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

Answer 1

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

当2个连续调用返回不同的值时，devMode中会出现异常。像

hasNextValue() {
  return {};
}

例外：表情已经改变......

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

<强>更新

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

这实际上是允许的。如果您的状态因某些事件（点击，超时，......）而发生变化，则角度变化检测会发生变化。如果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;
}

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

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

1 个答案: