EventEmiitter无法使用角度4

Question

您好我是角度4的新手我正在尝试实现事件发射器概念，但它无法正常工作。

我的演示中有以下代码

app.component.ts

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.html

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

我在fetchdata.component.ts中将yearHandler声明为@output变量然后实现了eventofClick（）事件，从该函数我发出事件

yearHandler在app.component.html中声明调用changeYearEvent（$ event）;

并且当调用changeYearEvent时，它在console.log中显示消息，但它不调用changeYearEvent

任何人都可以帮我解决这个问题。

谢谢。

Answer 1

您应该使用fetchdata作为选择器而不是div，因为@Output适用于组件

<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

您的事件是“从组件”发出的，因此您需要在组件上附加事件侦听器。现在它被分配在一个看似随机的div（你的最外层）。您需要将组件放在这样的模板中，并在其上放置事件处理程序：

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

如果你真的想要从“其他地方”捕获事件，而不是父模板。您需要有一个公共服务，两个组件都在构造函数中注入，共享一个Subject / Observable，接收者可以订阅，并且您的日历可以发出。