Angular 8 - 通知导航栏组件有关其他组件中的更改

Question

在索引中.html我有

<app-root></app-root>

这是app.component.ts和app.component.html

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
------------------------------------------
<nav-menu></nav-menu>
<div class='container-fluid'>
<div class='row justify-content-center'>
<div class='col col-md-4 body-content'>
<router-outlet></router-outlet>
</div>
</div>

在此旧代码中，您可以看到 NavMenu 组件不是路由系统的一部分。 所以我要做的是通过userService-a保留有关用户是否在NavMenu组件中登录的信息。

这是 NavMenu 代码 navmenu.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from './../services/user.service';
@Component({
selector: 'nav-menu',
templateUrl: './navmenu.component.html',
styleUrls: ['./navmenu.component.css']
})
export class NavMenuComponent implements OnInit {
loggedIn;
constructor(private router: Router, private userService: UserService) { }
ngOnInit() {
this.loggedIn = this.userService.isloggedIn;
}
}

和服务部分

public get isloggedIn(): boolean{
return localStorage.getItem('token') !==  null;
}
...

因此，当用户在登录组件中登录时。

onSubmit(form: NgForm) {
this.service.login(form.value).subscribe(
(res: any) => {
localStorage.setItem('token', res.token);
this.router.navigateByUrl('/home');
},
...

我需要在登录 NavBar 组件时反映更改，但 NavBar 组件不会重新加载，因此只有在我手动重新加载页面后才能看到更改。有没有办法以某种方式通知导航菜单组件有关更改的信息(重新加载导航菜单(？

Answer 1

您可以使用rxjs/Subject。Subject可以通知组件有关更改的信息。

创建要在其中创建通知的主题，然后根据需要在任何组件中订阅该Subject。

当你在Subject上调用next时，它会在订阅组件中触发回调。

演示(注意 AppComponent 中服务的值如何变化(

服务

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class DataService {
isLoggedInSubject: Subject<boolean> = new Subject();
isLoggedIn = false;
constructor() {
this.someServiceLogic();
}
someServiceLogic() {
setInterval(() => {
this.isLoggedIn = !this.isLoggedIn;
this.isLoggedInSubject.next(this.isLoggedIn);
}, 2000);
}
}

元件

import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
isLoggedIn = false;
constructor(private dataService: DataService) {  }
ngOnInit() {
this.dataService.isLoggedInSubject.subscribe(status => {
this.isLoggedIn = status; // your emitted value is received here.
})
}
}