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

Question

I am not able to access template reference variables #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;

but if I change it to the following, then it is able to access #interface.

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

Is there a way that I can dynamically access the values for 'this.activeTab'?

I have tried the following but doesn't work

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

Answer 1

How a about using getter

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

}

and

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

If you need to get instance of of interface component as well, use

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

Answer 2

You can't use the activeTab as reference because activeTab is a string. Instead you should use brackets notation as you did, so that you can reference to the class member that it's name is the value of activeTab .

Add this to before the brackets:

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

Live example: https://stackblitz.com/edit/angular-playground-o1mxe1