角度多行列表单击任意位置进行导航

Posted 2021-03-27

所以这可能很简单，但我很难制作一个包含两行数据的列表，允许用户点击整个列表项的任意位置进行导航。我目前有这个：

<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属性添加到两个行，这是有效的，但我不认为这是正确的方法。

是否有一种更优雅的方式来实现这一目标，我错过了？

答案

尝试在routerLink="/book/{{book.id}}"标签中添加mat-list-item并删除锚标签

这可能会奏效

另一答案

您可以尝试下面的代码，它对我有用

<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>```

另一答案

得到它的工作。用*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的直接孩子是mat-list-item's，但它看起来似乎没问题。