Question

按照此回答中提供的步骤进行操作 - Angular2: Using routes, how to display the navigation bar after successfully logged in?

事件发生在＆＃34;承诺＆＃34; login.component.ts并且预计会点击＆＃34; subscribe＆＃34;在navbar.component.ts的构造函数中，但它没有击中。我错过了什么？以下是代码：

Main.ts

＆＃13;

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

＆＃13;

App.component.ts

＆＃13;

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

＆＃13;

GlobalEventsManager.ts

＆＃13;

import { EventEmitter, Injectable } from "angular2/core";
import { IUserDetails } from "./home/login";

@Injectable()

export class GlobalEventsManager {
    public showNavBar: EventEmitter<boolean> = new EventEmitter();


    constructor() {

    }
}

＆＃13;

Navbar.component.ts

＆＃13;

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

＆＃13;

Login.component.ts

＆＃13;

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

＆＃13;

Answer 1

如果要引用在 Main.ts 中的boostrap参数中创建的GlobalEventsManager对象的单例实例，则无意中创建了GlobalEventsManager对象的新实例

从LoginComponent中的提供程序中删除对GlobalEventsManager的引用，它应该按预期工作。

如何在Angular 2

1 个答案: