是否可以在同一个锚标记上使用 routerLink 和点击事件？

Question

我有一堆 li 元素，当用户单击它们时，它会在不同的组件中打开这些元素的更详细视图。

但是，它需要两次点击才能显示我想显示的数据。

当用户单击 ONCE 时，组件将打开并显示空视图模板。

当用户单击 AGAIN 时，它会显示填充的数据。

我能不能把它放在一个定位标签中，然后将我路由到我的详细视图和一起发出点击事件？

是否有首选方法或更好的方法？

<ul>
  <li *ngFor="let favorite of sortedFavorites; let i= index">
    <a class= 'clickMe' (click)= "openContact($event, i)" routerLink= "/details">
    <div *ngIf= "favorite.isFavorite">
        <img class="smallImage" onerror="this.onerror=null;this.src='User Icon Small.png';"
             src={{favorite.smallImageURL}} />
        <h3><img src="Favorite — True.png">{{ favorite.name }}</h3>
        <br>
        <p>{{ favorite.companyName }}</p>
        <hr>
    </div>
   </a>
  </li>
</ul>

编辑：有些人建议我在填充数据之前使用 reslove 守卫来获取数据，但我只是从本地 JSON 文件中提取它并在我的组件之间传递它。

Answer 1

您对两者都使用了点击事件。使用路由器以编程方式导航到详细信息页面

 this.router.navigate(['path']);

无论进程在 openContact() 中做什么，然后在详细信息页面上重定向。

加入构造函数private router: Router

是否可以在同一个锚标记上使用 routerLink 和点击事件？

Is it possible to have routerLink and a click event on same anchor tag?

javascript

events

angular-ui-router

angular