В моем app.component. html:
<html>
<head></head>
<body>
<header *ngIf="loggedIn && showHeader"></header>
<router-outlet></router-outlet>
</body>
</html>
В моем app.component.ts :
export class AppComponent {
constructor(private HeaderService: HeaderService, private AuthService: AuthService) { }
get loggedIn(): boolean { return this.AuthService.getUserState(); }
get showHeader(): boolean { return this.HeaderService.getToggleState(); }
}
В моем header.service.ts :
Мы создали этот сервис, потому что после входа в систему есть другие определенные c компоненты, где заголовок также должен быть скрыт.
@Injectable({
providedIn: 'root'
})
export class HeaderService {
showHeader = true;
constructor() { }
setToggleState(state: boolean) {
this.showHeader = state;
}
getToggleState() { return this.showHeader; }
}
Теперь в моем login.component заголовок должен быть невидимым.
То, что происходит сейчас, заключается в том, что есть краткий миг (кажется, что происходит, когда вы входите в систему, а затем выходите из системы и возвращаетесь на страницу входа), когда заголовок виден до того, как он скрыт (и да, также выдает up ExpressionChangedAfterItHasBeenCheckedError).
Какой лучший способ добиться этого? Должен ли я просто установить showHeader в false по умолчанию?
login.component.ts
export class LoginComponent implements OnInit {
ngOnInit() {
// To hide the header
this.HeaderService.setToggleState(false);
}
}