无法访问模板引用变量

Question

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

存在一个问题，即 parent.html 处的模板引用变量仍然为 revertDisabled 变量获取值 true，即使在用户执行 child.ts 处的函数 onButtonClicked() 后 revertDisabled 值已从从真到假。

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

parent.html

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

child.ts (接口-settings.ts)

this.revertDisabled = true;

onButtonClicked() {
  this.revertDisabled = false;
}

Answer 1

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

但指南也明确表示：

The parent component cannot data bind to the child's start and stop methods nor to its 'seconds' property.

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

无法访问模板引用变量

unable to access template ref variables

parent-child

angular

angular6

angular7

angular-input