Angular2：使用路由,成功登录后如何显示导航栏？

发布时间：2020-12-17 07:39:54 所属栏目：安全来源：网络整理

导读：一旦用户成功完成,我试图显示导航栏. 例如：如何更改“LoginComponent”中“AppComponent”中的“showMenu”属性？重要提示：我正在使用路线. app.ts： @Component({ selector: 'app',template: `div *ngIf="showMenu" fnd-menu-nav/fnd-menu-nav /div rout

一旦用户成功完成,我试图显示导航栏.

例如：

如何更改“LoginComponent”中“AppComponent”中的“showMenu”属性？重要提示：我正在使用路线.

app.ts：

@Component({
  selector: 'app',template: `<div *ngIf="showMenu">
               <fnd-menu-nav></fnd-menu-nav>
             </div>
             <router-outlet></router-outlet>
              `,directives: [ROUTER_DIRECTIVES,MenuNavComponent]
})
@RouteConfig([
  { path: '/login',name: 'Login',component: LoginComponent,useAsDefault: true },{ path: '/welcome',name: 'Welcome',component: WelcomeComponent }
])
export class AppComponent {
  public showMenu : boolean;
}

@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 ) {
  }
  /* .. other methods  */
  /* .. other methods  */


  private onLoginSuccessfully(data : any) : void {
    /* --> HERE: Set showMenu in AppComponent to true. How? */
    this._router.navigate(['Welcome']);

  }
}

或者这种设计不是最好的解决办法吗？

我最近做了类似的事情,这里是我做的.首先,您需要在应用程序的根目录创建一个NavBarComponent.在NavBarComponent中,您引用(我所调用的)一个GlobalEventsManager,它是您需要注入的服务.

下面来看看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>(null);
    public showNavBarEmitter: Observable<boolean> = this._showNavBar.asObservable();

    constructor() {}

    showNavBar(ifShow: boolean) {
        this._showNavBar.next(ifShow);
    }


}

现在您将GlobalEventsManger服务注入到您的登录组件(这样)

import {GlobalEventsManager} from "./../GlobalEventsManager";

@Component({
  selector: 'fnd-login',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事件发射器：

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)=>{
            // mode will be null the first time it is created,so you need to igonore it when null
            if (mode !== null) {
              this.showNavBar = mode;
            }
        });
        
    }

 
}

在模板HTML中使用* ngIf =“showNavBar”来隐藏/显示导航栏.

您的应用程序组件看起来像这样：

@Component({
  selector: 'app',template: `<navbar></navbar>
             <router-outlet></router-outlet>
              `
})
export class AppComponent {
  //This doesn't belong here --> public showMenu : boolean;
}

当您启动应用程序时,GlobalEventsManager也必须注册：

import { GlobalEventsManager } from './GlobalEventsManager';
import { TopNavbarComponent } from './TopNavbarComponent';

@NgModule({
    bootstrap: [App],declarations: [
        App,TopNavbarComponent
    ],imports: [
        BrowserModule
    ],providers: [GlobalEventsManager]
})
export class AppModule {
}

应该这样做

更新：我已经更新了这个答案,以反映在组件之外使用事件的更接受的方式,即服务;这需要使用BehaviorSubject / Observable而不是EventEmitter

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!