要在Angular 6中登录后更改页眉/页脚,可以使用以下步骤:
header-footer.service.ts的新服务文件,用于管理页眉和页脚的状态。在该文件中,定义一个名为isUserLoggedIn的公共变量,用于跟踪用户是否已登录。将其初始化为false,表示用户尚未登录。然后,创建两个公共方法login和logout,分别用于将isUserLoggedIn设置为true和false。// header-footer.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class HeaderFooterService {
isUserLoggedIn: boolean = false;
constructor() { }
login() {
this.isUserLoggedIn = true;
}
logout() {
this.isUserLoggedIn = false;
}
}
HeaderFooterService并在构造函数中注入它。使用isUserLoggedIn变量来控制页眉和页脚的显示/隐藏状态。// header.component.ts
import { Component, OnInit } from '@angular/core';
import { HeaderFooterService } from '路径/header-footer.service';
@Component({
selector: 'app-header',
template: `
`,
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
constructor(public headerFooterService: HeaderFooterService) { }
ngOnInit() {
}
}
// footer.component.ts
import { Component, OnInit } from '@angular/core';
import { HeaderFooterService } from '路径/header-footer.service';
@Component({
selector: 'app-footer',
template: `
`,
styleUrls: ['./footer.component.css']
})
export class FooterComponent implements OnInit {
constructor(public headerFooterService: HeaderFooterService) { }
ngOnInit() {
}
}
HeaderFooterService并在构造函数中注入它。当用户成功登录时,调用login方法来更新isUserLoggedIn变量的值。// login.component.ts
import { Component, OnInit } from '@angular/core';
import { HeaderFooterService } from '路径/header-footer.service';
@Component({
selector: 'app-login',
template: `
`,
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private headerFooterService: HeaderFooterService) { }
ngOnInit() {
}
login() {
// 登录逻辑,验证用户凭据等
this.headerFooterService.login();
}
}
app.component.html,添加和标签,以在页面中显示页眉和页脚。
这样,当用户成功登录时,页眉和页脚将显示在页面上。当用户退出登录时,它们将被隐藏。