0

在 child.ts，我有一个函数 onButtonClicked，它将 revertDisabled 从 true 修改为 false。

有一个问题，即 parent.html 中的模板引用变量仍然为 revertDisabled 变量获取值为 true，即使用户在 child.ts 处执行了函数 onButtonClicked()，该函数已将 revertDisabled 值从 true 更改为 false。

我尝试通过在 parent.ts 添加 @input 来解决它，但仍然无法访问 revertDisabled 的更改值。

父.html

<button type="button" [disabled]="interface.revertDisabled"></button>
<interface-settings #interface></interface-settings>

child.ts（接口设置.ts）

this.revertDisabled = true;

onButtonClicked() {
  this.revertDisabled = false;
}
4

1 回答 1

2

是的，父母不会以这种方式获取价值。通过模板变量，您可以执行此处描述的子方法： https ://angular.io/guide/component-interaction#parent-interacts-with-child-via-local-variable

但该指南也明确表示：

父组件不能将数据绑定到子组件的 start 和 stop 方法，也不能绑定到它的“seconds”属性。

您可以使用@Output 和此处描述的模式完成您需要的工作：https ://angular.io/guide/component-interaction#parent-listens-for-child-event

基本上：

 //child.ts (interface-settings.ts)

 @Output() revertDisabled = new EventEmitter<boolean>();

 onButtonClicked() {
    this.revertDisabled.emit(false);
 }

然后：

 //  parent.html
 <button #parentButton type="button"></button>
 <interface-settings (revertDisabled)="parentButton.disabled=false"></interface-settings>
于 2020-08-07T22:09:38.400 回答