Angular 6:如何根据mat-nav-list选择的项在单独的部分中渲染注入数据？

npm install @angular/material

import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    MatListModule,
    MatIconModule
  ],
  ...
})
export class AppModule { }

<mat-nav-list>
  <a mat-list-item (click)="renderData('item1')">Item 1</a>
  <a mat-list-item (click)="renderData('item2')">Item 2</a>
  <a mat-list-item (click)="renderData('item3')">Item 3</a>
</mat-nav-list>

<div *ngIf="selectedItem">
  <!-- 在这里渲染注入的数据 -->
  {{ selectedItem }}
</div>

selectedItem: string;

renderData(item: string) {
  // 根据所选项设置selectedItem变量
  this.selectedItem = item;
}