无法访问模板引用变量

Question

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

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

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

parent.html

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

---

child.ts (interface-settings.ts)

this.revertDisabled = true;

onButtonClicked() {
  this.revertDisabled = false;
}

Answer 1

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

但指南也明确表示：

父组件不能数据绑定到子组件的启停 方法也不是它的“秒”属性。

您可以使用@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>