时间戳

首页 > 解决方案 > Angular 组件中的链接不起作用看起来无法单击

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

问题描述

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

打字稿

  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>

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

标签： angularhtmltypescriptangular6

解决方案

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

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

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

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

推荐阅读