Чтобы отобразить значение элемента списка по клику в компоненте mat-nav-list

Question

Я использую компонент <mat-nav-list> для отображения панели навигации, а также header(i,e mat-toolbar) для отображения нажатых list-items(ex Home 1) следующим образом:

• Теперь я хочу отобразить выбранное / нажатие list -item(ex Home 2) в заголовке.
• Значит при нажатии Home 2, Home 2 должно отображаться на header.

Stackblitz ссылка

Answer 1

Демо-код: https://stackblitz.com/edit/selection-list-activelinks-example?file=app/selection-list/selection-list.component.ts

Подход: Возьмите переменную-член для отображения в заголовке
и используйте событие щелчка как (click)="selected='Home 1'" на каждом mat-list-item. Так что при каждом клике измените эту выбранную переменную соответственно.

 <mat-toolbar color="primary"> {{selected}}</mat-toolbar>
<mat-nav-list>
    <mat-list-item [routerLink]="['/home1']" 
   (click)="selected='Home 1'" 
   [routerLinkActive]="['active']">
        <mat-icon [class.active]="selected" matListIcon>home</mat-icon>
        <a matLine>Home 1</a>
    </mat-list-item>

    <mat-list-item [routerLink]="['/home2']" 
    (click)="selected='Home 2'"
    [routerLinkActive]="['active']">
        <mat-icon matListIcon>home</mat-icon>
        <a matLine>Home 2</a>
    </mat-list-item>
<mat-nav-list>

Answer 2

Вы могли просто использовать *ngFor для циклического перебора listItems

Использовать свойство selectedItem и установить в click пункт меню:

export class SelectionListComponent {

  selectedItem = '';

  listItems = [
    { linkTitle: 'Home 1', link: '/home-a' },
    { linkTitle: 'Home 2', link: '/home-b' },
    { linkTitle: 'Home 3', link: '/home-c' },
    { linkTitle: 'Home 4', link: '/home-d' },
    { linkTitle: 'Home 5', link: '/home-e' },
  ];

  handleClick(selectedItem) {
    this.selectedItem = selectedItem.linkTitle;
  }

}

Теперь, чтобы активировать Nav Link, вам просто нужно определить маршруты, а затем применить директиву routerLinkActive и дать ей имя класса, который вы хотите применить к нему, когда он активен.

В шаблоне:

<mat-toolbar color="primary">{{ selectedItem }}</mat-toolbar>

<mat-nav-list>
    <mat-list-item *ngFor="let item of listItems" (click)="handleClick(item)">
        <mat-icon  matListIcon>home</mat-icon>
        <a 
          [routerLink]="item.link" 
          routerLinkActive="active" 
          matLine>
          {{item.linkTitle}}
        </a>
    </mat-list-item>
</mat-nav-list>

В CSS вы должны определить активный класс:

.active {
  color: #673AB7;
  font-weight: bold!important;
}

А затем в вашем AppModule:

@NgModule({
  imports: [
    ...
    RouterModule.forRoot([
      { path: 'home-a', component : SelectionListComponent },
      { path: 'home-b', component : SelectionListComponent },
      { path: 'home-c', component : SelectionListComponent },
      { path: 'home-d', component : SelectionListComponent },
      { path: '**', component: SelectionListComponent }
    ])
  ],
  ...
})
export class AppModule { }

Обновлен StackBlitz .