无法访问模板ref变量

Question

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

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

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

parent.html

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

---

child.ts(接口设置.ts(

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

Answer 1

Yes父级不会以这种方式获取值。通过模板变量，您可以执行子方法，如下所述：https://angular.io/guide/component-interaction#parent-通过局部变量与子对象交互

但指南也明确指出：

父组件不能数据绑定到子组件的开始和停止方法或其"seconds"属性。

您可以使用@Output和此处描述的模式来完成您需要的内容：https://angular.io/guide/component-interaction#parent-侦听子事件

基本上：

//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>