[英]Angular multi-line list click anywhere to navigate
So this might be simple but I'm having a hard time making a list with two rows of data that allows the user to click anywhere on the entire list item to navigate. 因此,这可能很简单,但我很难创建一个包含两行数据的列表,该列表允许用户单击整个列表项中的任意位置以进行导航。 I currently have this: 我目前有这个:
<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>
This mostly works but clicking the line with the book.description
doesn't navigate. 这通常有效,但是单击book.description
的行不会导航。 I've tried using the a
outside like so: 我试过像这样使用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>
But then the list items don't display correctly. 但是,然后列表项不能正确显示。 I tried adding the routerLink
property to both lines and that works but I don't think it's the correct way. 我尝试将routerLink
属性添加到这两行,并且可以,但是我认为这不是正确的方法。
Is there a more elegant way to accomplish this that I'm missing? 有没有一种更优雅的方式来实现我所缺少的功能?
try to add routerLink="/book/{{book.id}}"
in mat-list-item
tag and remove anchor tag 尝试在mat-list-item
标签中添加routerLink="/book/{{book.id}}"
并删除锚标签
this might work 这可能有效
You can try below code it's work for me 您可以尝试以下代码,它对我有用
<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>```
Got it to work. 得到它的工作。 Moved made line with *ngFor
just a div
, then put the mat-list-item
inside with the routerLink
: 将*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>
I don't know if there's any negatives to not having the immediate children of a mat-nav-list
be mat-list-item's
but it seems to look ok. 我不知道是否没有将mat-nav-list
的直接子mat-list-item's
作为mat-list-item's
不利条件,但看起来还可以。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.