护角功能

Question

对于我的应用程序，如果用户是页面上帖子的所有者，则我试图实现一个显示特定选项的功能。这些选项包括诸如编辑，创建新内容之类的内容。

在下面您可以看到我当前的功能，当然它可以正常工作！但是，我想将其实现为某种形式的防护，但我对Angular并不熟悉，并且看不到Angular防护如何提供返回值。

        if (this.posts.user.id === this.authService.user.id) {
          this.userOwnsPosts = true;
      }

问题是，我该怎么做角度方式？如果不是Angular方式，则不必守卫。

Answer 1

从技术上讲，“警卫队”是“路由警卫队”的一种实现，例如CanActivate接口，旨在与路由器配合使用。

要显示/隐藏UI的某些部分，通常会在模板中使用NgIf指令，例如，一旦有了问题中提到的功能，就可以执行以下操作：

<div *ngIf="userOwnsPosts">
 ...some options go here
</div>

如果这些选项是“ routerLinks”，则也可以使用路由保护器，但是如果仅使用路由保护器，而没有ngIf，则该选项仍会显示，但是单击后不会执行任何操作。

Answer 2

以this.userOwnsPosts = this.posts.user.id === this.authService.user.id;开头。

在HTML模板中，使用*ngIf：

<div *ngIf="userOwnsPost">
  <button>Edit</button>
  <button>Delete</button>
  ....
</div>