是否可能在同一锚定标记上有routerLink和click事件?

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

但是,它需要单击两次才能显示我要显示的数据。

当用户单击 一次 组件将打开,其中包含空视图样板。

当用户单击时 又一次 然后显示填充的数据。

我能不能不把这个放在一个锚定标签中,将我路由到我的详细视图 和 一次发出click事件?

有没有更好的方法或更好的方法来做到这一点?

<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 guards获取数据,但我只是从本地JSON文件中提取数据并在组件之间传递。