Angular2:使用路由，登录成功后如何显示导航栏? [英] Angular2: Using routes, how to display the navigation bar after successfully logged in?

问题描述

我正在尝试显示导航栏，一旦用户成功完成.

例如:

如何更改LoginComponent"内AppComponent"中的showMenu"属性?重要提示:我正在使用路由.

app.ts:

@Component({选择器:'应用'，模板:`<div *ngIf="showMenu"><fnd-menu-nav></fnd-menu-nav>

<路由器插座></路由器插座>`，指令:[ROUTER_DIRECTIVES, MenuNavComponent]})@RouteConfig([{ path: '/login', name: 'Login', 组件: LoginComponent, useAsDefault: true },{ 路径:'/welcome'，名称:'Welcome'，组件:WelcomeComponent }])导出类 AppComponent {公共 showMenu :布尔值；}

login.component.ts:

@Component({选择器:'fnd-login'，templateUrl: './fnd/login/components/login.component.html',提供者:[登录服务]})导出类 LoginComponent {/* .. 其他属性 */构造函数(私有_router:路由器，私有_loginService:LoginService){}/* .. 其他方法 *//* .. 其他方法 */私人 onLoginSuccessfully(data : any) : void {/* -->此处:将 AppComponent 中的 showMenu 设置为 true.如何?*/this._router.navigate(['欢迎']);}}

或者这个设计不是解决问题的最好方法?

解决方案

我最近做了类似的事情，下面是我的做法.首先，您需要在应用程序的根目录创建一个 NavBarComponent.在 NavBarComponent 中，您引用(我称之为)一个 GlobalEventsManager，它是您在需要的地方注入的服务.

以下是 GlobalEventsManager 的介绍:

import { Injectable } from '@angular/core';从rxjs/BehaviorSubject"导入 { BehaviorSubject };import { Observable } from "rxjs/Observable";@Injectable()导出类 GlobalEventsManager {private _showNavBar: BehaviorSubject= new BehaviorSubject(false);public showNavBarEmitter:Observable= this._showNavBar.asObservable();构造函数(){}showNavBar(ifShow: boolean) {this._showNavBar.next(ifShow);}}

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

import {GlobalEventsManager} from "./../GlobalEventsManager";@成分({选择器:'fnd-login'，templateUrl: './fnd/login/components/login.component.html',提供者:[登录服务]})导出类 LoginComponent {/* .. 其他属性 */构造函数(私有_router:路由器，私有_loginService:LoginService，私有globalEventsManager:GlobalEventsManager){}/* .. 其他方法 *//* .. 其他方法 */私人 onLoginSuccessfully(data : any) : void {/* -->此处:您告诉全局事件管理器显示导航栏 */this.globalEventsManger.showNavBar(true);this._router.navigate(['欢迎']);}}

在您的 NavBarComponent 中，您订阅了 showNavBar 事件发射器:

import {Component, OnInit} from "@angular/core";从../GlobalEventsManager"导入{GlobalEventsManager}；@成分({选择器:导航栏"，templateUrl: "app/main/topNavbar/TopNavbar.html"})导出类 TopNavbarComponent {showNavBar: boolean = false;构造函数(私有 globalEventsManager:GlobalEventsManager){this.globalEventsManager.showNavBarEmitter.subscribe((mode)=>{this.showNavBar = 模式；});}}

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

你的应用组件看起来像这样:

@Component({选择器:'应用'，模板:`<navbar></navbar><路由器插座></路由器插座>`})导出类 AppComponent {//这不属于这里 -->公共 showMenu :布尔值；}

还必须在启动应用程序时注册 GlobalEventsManager:

import { GlobalEventsManager } from './GlobalEventsManager';import { TopNavbarComponent } from './TopNavbarComponent';@NgModule({引导程序:[应用程序]，声明: [应用程序，顶部导航栏组件],进口:[浏览器模块],提供者:[GlobalEventsManager]})导出类 AppModule {}

应该可以.

更新:我已经更新了这个答案，以反映在组件外部(即在服务中)使用事件的更被接受的方式；这需要使用 BehaviorSubject/Observable 而不是 EventEmitter

I'm trying to show the navigation bar, once the user successfully do.

For example:

How To Change "showMenu" property in "AppComponent" inside the "LoginComponent"? Important: I am using routes.

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;
}

login.component.ts:

@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']);

  }
}

Or this design is not the best way to solve it?

解决方案

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.

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);
    }


}

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']);

  }
}

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;
        });
        
    }

 
}

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;
}

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 {
}

That should do it.

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

这篇关于Angular2:使用路由，登录成功后如何显示导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！