📌  相关文章
📜  无需重新加载的角度刷新页面 - TypeScript 代码示例

📅  最后修改于: 2022-03-11 14:48:16.032000             🧑  作者: Mango

代码示例5
/*You can use a BehaviorSubject for communicating between different 
components throughout the app. 
You can define a data sharing service containing the BehaviorSubject to 
which you can subscribe and emit changes.

Define a data sharing service
*/

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataSharingService {
    public isUserLoggedIn: BehaviorSubject = new BehaviorSubject(false);
}

/*Add the DataSharingService in your AppModule providers entry.

Next, import the DataSharingService in your  and in the 
component where you perform the sign-in operation. In  
subscribe to the changes to isUserLoggedIn subject:
*/

import { DataSharingService } from './data-sharing.service';

export class AppHeaderComponent { 
    // Define a variable to use for showing/hiding the Login button
    isUserLoggedIn: boolean;

    constructor(private dataSharingService: DataSharingService) {

        // Subscribe here, this will automatically update 
        // "isUserLoggedIn" whenever a change to the subject is made.
        this.dataSharingService.isUserLoggedIn.subscribe( value => {
            this.isUserLoggedIn = value;
        });
    }
}

/*In your  html template, you need to add the *ngIf 
condition e.g.:
*/

 


// Finally, you just need to emit the event once the user has logged in e.g:

someMethodThatPerformsUserLogin() {
    // Some code 
    // .....
    // After the user has logged in, emit the behavior subject changes.
    this.dataSharingService.isUserLoggedIn.next(true);
}