角度多行列表單擊任意位置進行導航

Question

因此，這可能很簡單，但我很難創建一個包含兩行數據的列表，該列表允許用戶單擊整個列表項中的任意位置以進行導航。 我目前有這個：

<mat-nav-list>
  <h3 matSubheader>Recent</h3>
  <mat-list-item *ngFor="let book of recentBooks$ | async">
      <a matLine routerLink="/book/{{book.id}}"><strong>{{book.title}}</strong></a>
      <p matLine>{{book.description}}</p>
  </mat-list-item>
</mat-nav-list>

這通常有效，但是單擊book.description的行不會導航。 我試過像這樣使用a外部：

<mat-nav-list>
  <h3 matSubheader>Recent</h3>
  <mat-list-item *ngFor="let book of recentBooks$ | async">
    <a routerLink="/book/{{book.id}}">
      <p matLine><strong>{{book.title}}</strong></p>
      <p matLine>{{book.description}}</p>
    </a>
  </mat-list-item>
</mat-nav-list>

但是，然后列表項不能正確顯示。 我嘗試將routerLink屬性添加到這兩行，並且可以，但是我認為這不是正確的方法。

有沒有一種更優雅的方式來實現我所缺少的功能？

Answer 1

嘗試在mat-list-item標簽中添加routerLink="/book/{{book.id}}"並刪除錨標簽

這可能有效

Answer 2

您可以嘗試以下代碼，它對我有用

<h3 matSubheader>Recent</h3>
<mat-list-item>
 <a [routerLink]="['/book',book.id]">
   <p matLine><strong>book</strong></p>
   <p matLine>This is a book</p>
 </a>
</mat-list-item>
</mat-nav-list>```

Answer 3

得到它的工作。 將*ngFor僅div ，然后將mat-list-item與routerLink一起routerLink ：

<mat-nav-list>
  <h3 matSubheader>Recent</h3>
  <div *ngFor="let book of recentBooks$ | async">
    <a mat-list-item routerLink="/book/{{book.id}}">
      <p matLine><strong>{{book.title}}</strong></p>
      <p matLine>{{book.description}}</p>
    </a>
  </div>
</mat-nav-list>

我不知道是否沒有將mat-nav-list的直接子mat-list-item's作為mat-list-item's不利條件，但看起來還可以。