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

Posted 2023-03-05

【中文标题】Angular 2将输入绑定到函数调用

【英文标题】：Angular 2 bind input to function call

【发布时间】：2016-10-01 07:10:58

【问题描述】：

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

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

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

【参考方案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;

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

【讨论】：

你的意思是返回不同的类型吗？

不，不同的实例或值。如果您使用===（如角度变化检测所做的那样）比较它们，即使它具有相同的形状，上面的代码也会为每个调用返回一个与之前不同的新对象。

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

我更新了我的答案，因为评论太长了。希望这能让它更清楚。