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的直系子孙是否mat-list-item's是否有负面影响，但这看起来还不错。

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

3 个答案: