如何角2

Question

继这个答案提供的步骤发射事件后订阅 - Angular2: Using routes, how to display the navigation bar after successfully logged in?

该事件在login.component.ts的“承诺”发射，并有望创下“订阅”在navbar.component.ts的构造函数中，但它没有打。我错过了什么？下面是代码：

Main.ts

import { bootstrap } from 'angular2/platform/browser';  
 
    // Our main component 
 
    import { AppComponent } from './app.component'; 
 
    import { GlobalEventsManager } from './globaleventsmanager'; 
 
    import {ROUTER_PROVIDERS} from 'angular2/router'; 
 
    
 
    bootstrap(AppComponent, [GlobalEventsManager, ROUTER_PROVIDERS]);

App.component.ts

import { Component } from 'angular2/core'; 
 
    import { LoginComponent } from './home/login.component'; 
 
    import { WelcomeComponent } from './home/welcome.component'; 
 
    import { HTTP_PROVIDERS } from 'angular2/http'; 
 
    import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router'; 
 
    import { TopNavbarComponent } from './navbar.component'; 
 
    
 
    @Component({ 
 
     selector: 'cmt-app', 
 
     template: `<div class='container'> 
 
         <navbar></navbar> 
 
         <router-outlet></router-outlet> 
 
        </div> 
 
       `, 
 
     directives: [ROUTER_DIRECTIVES, TopNavbarComponent], 
 
     providers: [HTTP_PROVIDERS] 
 
    }) 
 
    
 
    @RouteConfig([ 
 
      { path: '*', name: 'Login', component: LoginComponent, useAsDefault: true }, 
 
      { path: '/welcome', name: 'Welcome', component: WelcomeComponent } 
 
    ]) 
 
    
 
    export class AppComponent { 
 
     
 
    }

GlobalEventsManager.ts

import { EventEmitter, Injectable } from "angular2/core"; 
 
import { IUserDetails } from "./home/login"; 
 

 
@Injectable() 
 

 
export class GlobalEventsManager { 
 
    public showNavBar: EventEmitter<boolean> = new EventEmitter(); 
 

 

 
    constructor() { 
 

 
    } 
 
}

Navbar.component.ts

 import {Component, ViewEncapsulation, OnInit} from "angular2/core"; 
 
    import {GlobalEventsManager} from "./globaleventsmanager"; 
 
    import { IUserDetails } from '././home/login'; 
 
    
 
    @Component({ 
 
     selector: "navbar", 
 
     templateUrl: '/app/navbar.component.html', 
 
     encapsulation: ViewEncapsulation.None 
 
    }) 
 
    
 
    export class TopNavbarComponent { 
 
     showNavBar: boolean = false; 
 
     menuItems: IUserDetails[] = []; 
 
    
 
     constructor(private globalEventsManager: GlobalEventsManager) { 
 
      this.globalEventsManager.showNavBar.subscribe((data: boolean) => { 
 
       console.log('reached'); 
 
       //this.menuItems.push(data); 
 
       this.showNavBar = true; 
 
       console.log(this.menuItems); 
 
       //console.log(this.showNavBar); 
 
      }, error => console.log(error)); 
 
    
 
     } 
 
    }

Login.component.ts

import { Component, Output, EventEmitter } from 'angular2/core'; 
 
import { Http, Response, Headers, RequestOptions } from 'angular2/http'; 
 
import { Observable } from 'rxjs/Observable'; 
 
import { CommonService } from '../services/common.service'; 
 
import 'rxjs/add/operator/map'; 
 
import 'rxjs/add/operator/catch'; 
 
import { IUserDetails } from '../home/login'; 
 
import { GlobalEventsManager } from './../globaleventsmanager'; 
 
import { Router } from 'angular2/router'; 
 

 
@Component({ 
 
    templateUrl: 'app/home/login.component.html', 
 
    providers: [CommonService, GlobalEventsManager] 
 
}) 
 

 
export class LoginComponent { 
 
    private _commonServiceUrl = 'http://localhost:58116/api/common/initializemenuitems'; 
 

 
    constructor(private _router: Router, private _commonService: CommonService, private globalEventsManager: GlobalEventsManager) { 
 
    } 
 

 
    accountName: string = ''; 
 
    loginId: string = ''; 
 
    password: string = ''; 
 
    menuItems: IUserDetails[] = []; 
 
    errorMessage: any[]; 
 

 
    loginUser(): void{ 
 
     this._commonService.loginUser(this.accountName, this.loginId, this.password, 'common', 'initializemenuitems') 
 
      .subscribe(data => this.promise(data), error => this.errorMessage = <any>error); 
 
    } 
 

 
    private promise(data: IUserDetails) { 
 
     this.globalEventsManager.showNavBar.emit(true); 
 
     this._router.navigate(['Welcome']); 
 

 
    } 
 

 
    private handleError(error: Response) { 
 
     console.error(error); 
 
     return Observable.throw(error.json().error || 'Server error'); 
 
    } 
 
}

Answer 1

在你不经意地创造了GlobalEventsManager对象的新实例，当你想引用您在自举论点Main.ts

删除引用创建GlobalEventsManager对象的单个实例从LoginComponent中的提供者到GlobalEventsManager，它应该按预期工作。