Angular 2：事件未触发答案

【问题标题】：Angular 2: Event not firingAngular 2：事件未触发
【发布时间】：2016-12-06 10:11:53
【问题描述】：

我试图在我的组件从服务获取登录用户时触发一个事件，因为我希望仅在用户登录时显示导航栏。

这是我的 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 指令阻止了事件的触发，但即使删除它，事件也不会被触发......

【问题讨论】：

标签： javascript angularjs angular angular2-template angular2-changedetection

【解决方案1】：

@Output()s 发出的事件只能在父组件或元素上应用的指令上订阅。 AppComponent 没有父组件，因此这种方法不起作用。

在您的情况下，最好使用带有 observables 的共享服务。 https://angular.io/docs/ts/latest/cookbook/component-communication.html

【讨论】：

【解决方案2】：

正如 Günter Zöchbauer 建议的那样，使用 Observables 和 Service 解决了（谢谢！）。

下面是我的解决方案：

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>

【讨论】：