Angular2 Получить ссылку на компонент динамически

Question

У меня есть несколько <mat-button-toggle> элементов, сгенерированных в моем приложении, и я хочу, чтобы всегда был выбран только один. Проблема, с которой я столкнулся, заключается в том, как получить ссылку на компонент для последней выбранной кнопки-переключателя при нажатии другой кнопки-переключателя.

Я действительно долго искал, но не мог понять, как это сделать.

component.html

<mat-button-toggle (click)="onKeywordSelect($event)" *ngFor="let keyword of keywords" [id]="keyword.id" [attr.id]="keyword.id" [value]="keyword.id" class="keyword">
  <div class="text">{{ keyword.name }}</div>
</mat-button-toggle>

component.ts

// imports and @Component

export class NavbarComponent implements OnInit {

  keywords = [new Keyword('name1'), new Keyword('name2')]; // sample data
  $selectedKeyword: $ | any; // I've imported JQuery

  onKeywordSelect(event: any) {
    // This element depends on where you mouse was positioned when clicking
    // Most often not the <mat-button-toggle> but some child element
    const target = event.target;
    // To get to the <mat-button-toggle> component that was clicked
    const matButton = $(target).closest('mat-button-toggle');

    if (this.$selectedKeyword !== undefined) {
        // At the start there is no selected keyword
        // TODO: Set the 'checked' property of the cur selected keyword to false
    }
    this.$selectedKeyword = $matButton;
  }
}

Я пробовал это с @ ViewChild () , но из-за того, что id выбранного ключевого слова изменяется, когда пользователь выбирает одно, я не знаю, как отслеживать ссылку на выбранный компонент.

Редактировать

Забыл упомянуть: да, я знаю о mat-button-toggle-group, но я не хочу использовать его из-за некоторых стилей. Разве нет другого способа решить эту проблему?

Answer 1

Редактировать: Обновлен мой ответ, поскольку ваше требование не использовать mat-button-toggle-group:

Вы можете использовать свойство checked и установить текущее и последнее выбранное значение для события change, например:

component.html:

<mat-button-toggle
  *ngFor="let keyword of keywords"
  value="{{keyword.id}}"
  [id]="keyword.id"
  [attr.id]="keyword.id"
  (change)="this.onChange(keyword.id)"
  [checked]="this.currValue === keyword.id">
  {{keyword.name}}
</mat-button-toggle>

<div class="example-selected-value">
    Last Selected value: {{this.lastValue}}
</div>
<div class="example-selected-value">
    Current Selected value: {{this.currValue}}
</div>

component.ts:

keywords: any = [
    {id: 1, name: "name1"},
    {id: 2, name: "name2"},
    {id: 3, name: "name3"},
  ]
  lastValue: string = "";
  currValue: string = "";

  onChange = (value) => {
    this.lastValue = this.currValue;
    this.currValue = value;
  }

Проверьте демо Здесь .

Answer 2

Add mat-button-toggle-group to select only one button and get value of group to get last selected button 

see: https://stackblitz.com/angular/yrqebgjbxao?file=app%2Fbutton-toggle-exclusive-example.ts