如何在Angular中隐藏登录和注册链接到其他页面

Question

在App.component.ts中，我已将路由器链接重定向到主页，我想在其中隐藏登录和注册链接。我知道很多人会回答authGuard，我是角度的新手。只是想知道如何在路由器底座上的不同页面上隐藏一些链接或功能，我想我可以在 ngIf 和路由器链接中做到这一点，但在哪里写。流量是点击登录或注册后想要隐藏链接 谁能帮忙？

<a [routerLink]="['/login']"  class="btn btn-link">Login</a>
<a [routerLink]="['/registration']"  class="btn btn-link">Register</a>
<router-outlet></router-outlet>

Answer 1

您需要在共享服务上具有登录标志。

创建名为"登录"的服务

@Injectable({
providedIn: 'root'
})
export class LoggedInService {
loggedIn$ = new BehaviorSubject(false);
}

注入您登录的服务，并在登录时在行为主题上调用下一步

this.loggedInService.loggedIn$.next(true);

并在带有菜单的组件上使用它来隐藏登录按钮

loggedIn$ = this.loggedInService.loggedIn$;

并在模板中

<a [routerLink]="['/login']"  class="btn btn-link" *ngIf="loggedIn$ | async">Login</a>