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

Is it acceptable to bind @Input() property of child component to a function call of parent component, for example:

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

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

This seems to work, but I wonder how. Are those inputs re-evaluated when event is fired from component, or what drives the input binding?

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

1 个解决方案

#1

Sure. The function is called every time change detection runs and assigns the result of the function call to the input property.

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

You get an exception in devMode when 2 successive calls return different values. like

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

hasNextValue() {
  return {};
}

Exception: Expression has changed ...

例外:表达已发生变化......

It is discouraged to bind to functions. Rather assign the result to a property and bind to this property. If you know what you are doing it's fine though.

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

update

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

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

This is actually allowed. If your state changes because of some event (click, timeout, ...) then Angular change detection expect changes. If Angular change detection calls the method twice (as it does in devMode) without any event happening in between, then it doesn't expect changes and throws the exception mentioned above. What Angular doesn't like is when change detection itself causes changes.

这实际上是允许的。如果您的状态因某些事件(点击,超时,......)而发生变化,则角度变化检测会发生变化。如果Angular变化检测调用该方法两次(就像在devMode中那样),而两者之间没有发生任何事件,那么它不会期望更改并抛出上述异常。 Angular不喜欢的是当变化检测本身引起变化时。

Below example would also cause an exception because change detection itself would modify the components state (this.someState = !this.someState;) which is not allowed.

下面的示例也会导致异常,因为更改检测本身会修改组件状态(this.someState =!this.someState;),这是不允许的。

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

Two successive calls would return false and true even when no event happened in between.

即使两者之间没有发生任何事件,两个连续的调用也将返回false和true。

This example would work fine though

这个例子可以正常工作

someState:boolean = false;

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

hasNextValue() {
  return this.someState;
}

because two successive calls (without any event in between) would return the same value.

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

#1