Угловой многострочный список нажмите в любом месте для навигации

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

попробуйте добавить routerLink="/book/{{book.id}}" в mat-list-item тег и удалите якорь тег

это может сработать

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:

<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 be mat-list-item's, но, кажется, выглядит хорошо.