：イベントは、私はユーザーがログインしているだけでナビゲーションバーを表示したいと思いますので、私は私のコンポーネントがサービスからログインしているユーザーを取得するときにイベントを発生しようとしている

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> 

誰かが自分の予定が放火されない理由を知っていますか？

は当初、私はこの問題も、イベントが@Output() Sから放出された

Answer 1

イベントのみに加入することができます...とにかく解雇されていないことを取り除くが、イベントの発火を防止した*ngIf指示だと思いました親コンポーネントまたは要素に適用されるディレクティブに適用されます。 AppComponentには親コンポーネントがないため、この方法は機能しません。

あなたの場合は、オブザーバブルで共有サービスを使用する方がよいでしょう。ギュンターZöchbauerは（感謝！）を示唆したよう https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 2

は、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>