Question

我有一个带有几个按钮的标题，例如Home，关于我们，注册，登录，注销，注册，我希望显示除用户登录时登录和注册以外的所有按钮，如果用户不是，则只显示那两个按钮记录了。

我知道我可以使用这样的东西：

<li *ngIf="!isUserLoggedIn"><a href="#">Log in</a></li>
<li *ngIf="isUserLoggedIn"><a href="#">Log out</a></li>
<li *ngIf="!isUserLoggedIn"><a href="#">Register</a></li>

但是从头部调用服务以检查用户是否已记录并初始化此变量可能是个坏主意。我是对的吗？

Answer 1

我做的是：

1 - 创建一个Auth服务，负责设置代表身份验证状态的变量。

2 - 将auth状态变量设置为Observation one;

3 - 在标题组件上，您可以订阅此auth服务变量观察者，然后根据auth变量状态更改标题模式。

例如：

auth.service.ts

聚苯乙烯。在声明localStorage.getItem('authState')时请注意authStateSubject。这样您就可以获得用户的当前状态。

...
@Injectable()
export class AuthService {

  // you can get the actual state from memory here
  private authStateSubject: BehaviorSubject<Boolean> = new BehaviorSubject<Boolean>(localStorage.getItem('authState'));

  state: Observable<Boolean> = this.authStateSubject.asObservable();
...

header.component.ts

...
@Component({
  ...
})

export class SidenavLeftComponent {

  isUserLoggedIn: boolean;

  constructor(private authService: AuthService) {
    ...
  }

  ngOnInit(){
    // update auth status when it changes
    this.authService.state.subscribe(state => this.isUserLoggedIn = state);
  }

}
...

header.component.html

...
<li *ngIf="!isUserLoggedIn"><a href="#">Log in</a></li>
<li *ngIf="isUserLoggedIn"><a href="#">Log out</a></li>
<li *ngIf="!isUserLoggedIn"><a href="#">Register</a></li>
...

当用户登录时，您可以在auth.service.ts中调用此方法 this.authStateSubject.next(true);

当用户注销时，您可以在auth.service.ts中调用此方法 this.authStateSubject.next(false);

这样，所有订阅者都会注意到新值并对其采取行动。

Angular 2 - 条件头

1 个答案: