Question

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

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>

通过单击它应导航到用户个人资料页面。另外，它也不会在控制台中显示任何错误，因为正如我所说，即使单击也无法实现。怎么了？

Answer 1

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

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

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

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

Angular组件中的链接不起作用，看起来无法点击

1 个答案: