角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>