在 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.

闪电战链接

Answer 1

你本来可以用来*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;
  }

}

现在，要激活导航链接，您只需要定义路由，然后应用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。