如何动态访问 angular.html 中定义的模板引用变量（符号：#）

Question

我无法访问模板引用变量#interface if this.activeTab = 'interface';

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

// parent.ts
 this.activeTab = 'interface';

//child.ts (interface-settings.ts)
 this.revertDisabled = true;

但是如果我将其更改为以下内容，则它可以访问#interface。

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

有没有一种方法可以动态访问“this.activeTab”的值？

我尝试了以下但不起作用

 <button type="button" [disabled]="[activeTab].revertDisabled"></button>

Answer 1

如何使用 getter

get revertDisabled(){
   return yourActivetabl.get.somehow.your.value;

}

和

<button type="button" [disabled]="revertDisabled"></button>

如果您还需要获取接口组件的实例，请使用

@ViewChildren("interface") //this is the #innterface value
instances:QueryList(InterfaceClass);

Answer 2

您不能使用activeTab作为参考，因为activeTab是一个字符串。 相反，您应该像以前一样使用括号表示法，以便您可以引用 class 成员，它的名称是activeTab的值。

将this添加到括号前：

<button type="button" [disabled]="this[activeTab].revertDisabled"></button>

现场示例： https://stackblitz.com/edit/angular-playground-o1mxe1