Angular 组件中的链接不起作用看起来无法单击答案

【问题标题】：Link in Angular component is not working looks impossible to clickAngular 组件中的链接不起作用看起来无法单击
【发布时间】：2019-01-04 17:44:18
【问题描述】：

当我们尝试单击以浏览用户的个人资料时，什么也没有发生，而且看起来无论如何都无法单击。代码如下：

TypeScript

  ViewUser(user) {
    this.router.navigate([user.username]);
    if (this.loggedInUser.username !== user.username) {
      this.userService.ProfileNotifications(user._id).subscribe(
        data => {
          this.socket.emit('refresh', {});
        },
        err => console.log(err)
      );
    }
  }

HTML

 <div class="card card-person">
    <a (click)="ViewUser(user)">
      <img class="card-img-top" src="http://res.cloudinary.com/cloud_name/image/upload/v{{user.picVersion}}/{{user.picId}}"
       alt="Card image" style="width:100%">
      <div class="card-body">
        <h4 class="card-title"> {{user.firstName}} {{user.lastName}}</h4>
        <p class="card-text">{{user.age}}</p>
        <p class="card-text">{{user.country}},{{user.city}}</p>
        <p class="material-icons" *ngIf="CheckIfOnline(user.username)">online</p>
        <a href="#" class="btn button-image closeButton btn-message" [routerLink]="['/chat', user.username]">Message</a>
      </div>
    </a>
  </div>

单击它应该导航到用户个人资料页面。此外，它不会在控制台中显示任何错误，因为正如我所说，甚至无法单击。怎么了？

【问题讨论】：

一个链接 (a) 包含一个包含另一个链接的 div ？不好
删除href
可能是 CSS 导致错误，请仔细检查z-index。
根本没有z-index，也没有为标签添加任何样式。
在这里发布你的路由配置，可能你的路由设置有问题

标签： angular html typescript angular6

【解决方案1】：

我不认为这是一个角度错误。我认为这与 <a> 标签的样式有关，默认情况下它是内联的。您可以将这些行添加到 your-component.css 中

a.fill {
width: 100%;
height: 50px;
}

或者如果您使用引导程序，您可以将 nav-link 类添加到您的标签中，例如

<a class="nav-link" (click)="ViewUser(user)">

【讨论】：