EventEmiitterがアンギュラ4で動作していません

Question

こんにちは私はアンギュラ4で新しいです イベントエミッタのコンセプトを実装しようとしていますが、動作していません。

私は私のデモのコードを次している

app.component.html

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 

    changeYearEvent($event: any) { 
     console.log("called emit"); 
     console.log($event); 
    } 
} 

app.component.ts

<div (yearHandler)="changeYearEvent($event);" class='container-fluid'> 
    <div class='row'> 
     <div class='col-sm-3'> 
      <nav-menu></nav-menu> 
     </div> 
     <div class='col-sm-9 body-content'> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</div> 

fetchdata.component.ts

import { Component, Inject, Output, EventEmitter } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Component({ 
    selector: 'fetchdata', 
    templateUrl: './fetchdata.component.html' 
}) 
export class FetchDataComponent { 
    public forecasts: WeatherForecast[]; 
    @Output() yearHandler = new EventEmitter(); 
    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) { 
     http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => { 
      this.forecasts = result.json() as WeatherForecast[]; 
     }, error => console.error(error)); 
    } 

    eventofClick() { 
     console.log("emit call", "call"); 
     this.yearHandler.emit("hii"); 
    } 
} 

interface WeatherForecast { 
    dateFormatted: string; 
    temperatureC: number; 
    temperatureF: number; 
    summary: string; 
} 

fetchdata.component.html

<h1>Weather forecast</h1> 

<p>This component demonstrates fetching data from the server.</p> 

<p *ngIf="!forecasts"><em>Loading...</em></p> 
<a (click)="eventofClick()">Hello</a> 
<table class='table' *ngIf="forecasts"> 
    <thead> 
     <tr> 
      <th>Date</th> 
      <th>Temp. (C)</th> 
      <th>Temp. (F)</th> 
      <th>Summary</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let forecast of forecasts"> 
      <td>{{ forecast.dateFormatted }}</td> 
      <td>{{ forecast.temperatureC }}</td> 
      <td>{{ forecast.temperatureF }}</td> 
      <td>{{ forecast.summary }}</td> 
     </tr> 
    </tbody> 
</table> 

私はイベント

emmitその機能から、fetchdata.component.ts 次いで実施eventofClick（）イベントで@output変数としてyearHandler宣言

yearHandlerはapp.component.htmlでchangeYearEvent（$ event）を呼び出して宣言しました。

とchangeYearEventはそれがにconsole.log にメッセージを表示すると呼ばれているが、それは誰もがこの中に何が間違っている私を助けてくださいすることができchangeYearEvent

を呼び出していません。

ありがとうございます。

Answer 1

あなたはコンポーネントにイベントリスナーを添付する必要があるので、

<fetchdata (yearHandler)="changeYearEvent($event);"> 
    <div class='row'> 
     <div class='col-sm-3'> 
      <nav-menu></nav-menu> 
     </div> 
     <div class='col-sm-9 body-content'> 
      <router-outlet></router-outlet> 
     </div> 
    </div> 
</fetchdata> 

Answer 2

あなたのイベントは、「コンポーネントから」放出されるコンポーネントのセレクタの代わりに、@Output作品としてdivとしてfetchdataを使用する必要があります。今は、一見無作為のdiv（あなたの一番外側）に割り当てられています。あなたはそれにあなたのイベントハンドラで、このようなテンプレートでコンポーネントを持っている必要があります：

<div> 
    <fetchdata (yearHandler)="changeYearEvent($event)"></fetchdata> 
</div> 

あなたが実際には「どこか」からのイベントが、親テンプレートをキャッチしたい場合。両方のコンポーネントがコンストラクタに挿入し、Subject/Observableを共有し、受信者がサブスクライブし、カレンダーを発行できる共通のサービスが必要です。