更新时间:2023-08-25 14:06:22
我最近做了类似的事情,这就是我的做法.首先,您需要在应用程序的根目录下创建一个NavBarComponent.在NavBarComponent中,您引用(我称之为)GlobalEventsManager,这是一种您在需要的地方注入的服务.
I recently did something similar and here is how I did it. First, you need to create a NavBarComponent at the root of your app. And in the NavBarComponent you reference (what I call) a GlobalEventsManager which is a service that you inject where you need it.
这里是GlobalEventsManager的一个例子:
Here is a look at the GlobalEventsManager:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from "rxjs/BehaviorSubject";
import { Observable } from "rxjs/Observable";
@Injectable()
export class GlobalEventsManager {
private _showNavBar: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public showNavBarEmitter: Observable<boolean> = this._showNavBar.asObservable();
constructor() {}
showNavBar(ifShow: boolean) {
this._showNavBar.next(ifShow);
}
}
现在您将GlobalEventsManger服务注入到您的登录组件中(类似这样)
Now you inject the GlobalEventsManger service into your login component (something like this)
import {GlobalEventsManager} from "./../GlobalEventsManager";
@Component({
selector: 'fnd-login',
templateUrl: './fnd/login/components/login.component.html',
providers: [LoginService]
})
export class LoginComponent {
/* .. other properties */
constructor(private _router: Router, private _loginService: LoginService, private globalEventsManager: GlobalEventsManager) {
}
/* .. other methods */
/* .. other methods */
private onLoginSuccessfully(data : any) : void {
/* --> HERE: you tell the global event manger to show the nav bar */
this.globalEventsManger.showNavBar(true);
this._router.navigate(['Welcome']);
}
}
在您的NavBarComponent中,您订阅了showNavBar事件发射器:
In your NavBarComponent you subscribe to the showNavBar Event Emitter:
import {Component, OnInit} from "@angular/core";
import {GlobalEventsManager} from "../GlobalEventsManager";
@Component({
selector: "navbar",
templateUrl: "app/main/topNavbar/TopNavbar.html"
})
export class TopNavbarComponent {
showNavBar: boolean = false;
constructor(private globalEventsManager: GlobalEventsManager) {
this.globalEventsManager.showNavBarEmitter.subscribe((mode)=>{
this.showNavBar = mode;
});
}
}
在模板HTML中使用* ngIf ="showNavBar"隐藏/显示导航栏.
use *ngIf="showNavBar" in the template HTML to hide/show the Nav bar.
您的应用程序组件如下所示:
Your app component then looks something like this:
@Component({
selector: 'app',
template: `<navbar></navbar>
<router-outlet></router-outlet>
`
})
export class AppComponent {
//This doesn't belong here --> public showMenu : boolean;
}
启动应用程序时,还必须注册GlobalEventsManager:
Also the GlobalEventsManager must be registered when you boot the app:
import { GlobalEventsManager } from './GlobalEventsManager';
import { TopNavbarComponent } from './TopNavbarComponent';
@NgModule({
bootstrap: [App],
declarations: [
App,
TopNavbarComponent
],
imports: [
BrowserModule
],
providers: [GlobalEventsManager]
})
export class AppModule {
}
应该这样做.
更新:我已经更新了此答案,以反映使用组件外部(即服务中)的事件的更可接受的方式;这需要使用BehaviorSubject/Observable代替EventEmitter
UPDATE: I have updated this answer to reflect the more accepted way of using events outside of a component, ie in a service; which entails using BehaviorSubject/Observable instead of EventEmitter