как получить динамический доступ к ссылочным переменным шаблона (символ: #), определенным в 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

Вы не можете использовать activeTab в качестве ссылки, потому что activeTab - это строка. Вместо этого вы должны использовать нотацию скобок, как и вы, чтобы вы могли ссылаться на член класса, имя которого является значением activeTab.

Добавьте this перед скобками:

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

Живой пример: https://stackblitz.com/edit/angular-playground-o1mxe1

Answer 2

Как насчет использования геттера

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

}

и

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

Если вам также нужно получить экземпляр компонента интерфейса, используйте

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