角2：事件不觸發

Question

我想，當我的部件從服務獲取登錄用戶觸發一個事件，因爲我想顯示的導航欄只有當用戶登錄

這裏是我的app.component代碼：

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'; 
import { ROUTER_DIRECTIVES, Router } from '@angular/router'; 
import { LoginComponent } from './login.component'; 
import { DashboardComponent } from './dashboard.component'; 
import { ControlDetailComponent } from './control-detail.component'; 
import { PageNotFoundComponent } from './pagenotfound.component'; 
import { SettingsComponent } from './settings.component'; 
import { UserService } from '../service/user.service'; 
import { User } from '../object/user'; 

@Component({ 
    selector: 'myApp', 
    templateUrl: './app/template/app.component.html', 
    styleUrls: ['styles.css'], 
    directives: [ROUTER_DIRECTIVES], 
    precompile: [LoginComponent, DashboardComponent, ControlDetailComponent, PageNotFoundComponent, SettingsComponent] 
}) 
export class AppComponent { 
    @Input() loggedUser:User; 
    @Output() userChanged:EventEmitter<User> = new EventEmitter<User>(); 

    constructor(private _userService:UserService, private _router:Router) {} 

    ngAfterViewInit() { 
     if(this._userService.isUserLogged()) { 
      this.userChanged.emit(this._userService.loggedUser); 
     } 
    } 

    switchUser(event) { 
     this.loggedUser = event.target.value; 
     console.log("event triggered"); 
    } 
} 

這是其關聯的模板：

<div class="all-content"> 
<nav (userChanged)="switchUser($event)" *ngIf="loggedUser"> 
    <ul> 
     <a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a> 
     <a [routerLink]="['/settings']" routerLinkActive="active">Settings</a> 
     <a (click)="logout()">Logout</a> 
    </ul> 
</nav> 

有人知道爲什麼我的事件沒有解僱？

起初我以爲這個問題是*ngIf指令這是防止該事件的觸發，但即使去除，該事件不會反正解僱......通過@Output() S排出

Answer 1

活動只能訂閱在父組件上或在元素上應用的指令。 AppComponent沒有父組件，因此此方法無效。

在你的情況下，最好使用帶有observables的共享服務。 https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

使用Observables和Service，如君特Zöchbauer建議解決（謝謝！）。

下面我的解決辦法：

user.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { Subject } from 'rxjs/Subject'; 
import { Control } from '../object/control'; 
import { User } from '../object/user'; 


@Injectable() 
export class UserService { 
    private userChangedSource = new Subject<User>(); 
    userChanged = this.userChangedSource.asObservable(); 
    loggedUser:User; 

    userLoggedIn(user:User) { 
     this.loggedUser = user; 
     this.userChangedSource.next(user); 
    } 

    ... 
} 

app.component.ts

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { ROUTER_DIRECTIVES, Router } from '@angular/router'; 
import { LoginComponent } from './login.component'; 
import { DashboardComponent } from './dashboard.component'; 
import { ControlDetailComponent } from './control-detail.component'; 
import { PageNotFoundComponent } from './pagenotfound.component'; 
import { SettingsComponent } from './settings.component'; 
import { UserService } from '../service/user.service'; 
import { User } from '../object/user'; 

@Component({ 
    selector: 'myApp', 
    templateUrl: './app/template/app.component.html', 
    styleUrls: ['styles.css'], 
    directives: [ROUTER_DIRECTIVES], 
    precompile: [LoginComponent, DashboardComponent, ControlDetailComponent, PageNotFoundComponent, SettingsComponent] 
}) 
export class AppComponent implements OnInit { 
    loggedUser:User; 

    constructor(private _userService:UserService, private _router:Router) { 
     this._userService.userChanged.subscribe(user => { 
       this.loggedUser = user; 
       console.log("event triggered"); 
     }); 
    } 
    ... 
} 

app.component.html

<div class="all-content"> 
    <nav *ngIf="loggedUser" > 
     <ul> 
      <a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a> 
      <a [routerLink]="['/settings']" routerLinkActive="active">Settings</a> 
      <a (click)="logout()">Logout</a> 
     </ul> 
    </nav> 
<router-outlet></router-outlet> 
<br/> 
</div>