javascript – Angular 2绑定输入到函数调用

前端之家收集整理的这篇文章主要介绍了javascript – Angular 2绑定输入到函数调用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

IoUsCategory]="hasPrevIoUsCategory()"
        (nextClicked)="nextCategory()"
        (prevIoUsClicked)="prevIoUsCategory()"
        (submitClicked)="submit()"

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

最佳答案
当然.每次更改检测运行时都会调用函数,并将函数调用的结果分配给input属性.

当2个连续调用返回不同的值时,devMode中会出现异常.喜欢

hasNextValue() {
  return {};
}

Exception: Expression has changed …

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

更新

so returning true / false according to some internal state is not allowed? Strange that my navigation still works

这实际上是允许的.如果您的状态因某些事件(点击,超时,……)而发生变化,那么角度变化检测会发生变化.如果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;
}

因为两次连续调用(中间没有任何事件)将返回相同的值.

猜你在找的HTML相关文章