如果没有用户以角度4登录，则标题应隐藏

Question

如果没有用户在angular 4应用程序中登录，我的要求是隐藏标题。

我试图在app.component.html和app.component.ts中实现它

app.component.html

<app-header *ngIf="isUserLoggedIn"></app-header>
<router-outlet></router-outlet>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from './services/authentication.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent implements OnInit {
  title = 'app';
  public isUserLoggedIn: boolean;

  constructor(private authService: AuthenticationService) {}

  ngOnInit() {
      this.isUserLoggedIn = this.authService.isUserLoggedIn(); // returns true if user logged-in otherwise returns false
      console.log(this.isUserLoggedIn);
  }

}

以上代码仅在页面刷新时才起作用，并且每当url路径更改而没有刷新时都不起作用。有什么想法/替代想法吗？

Answer 1

ngOnInit 在组件初始化期间仅被调用一次，因此当您刷新页面时它会起作用。

为了使它工作，创建一个函数并将其返回

 isLoggedIn(): boolean {
     return this.authService.isUserLoggedIn();
 }

和HTML

<app-header *ngIf="isLoggedIn()"></app-header>