EventEmitter 在角度 4 中不起作用答案

【问题标题】：EventEmiitter is not working in angular 4EventEmitter 在角度 4 中不起作用
【发布时间】：2018-06-08 16:06:51
【问题描述】：

您好，我是 Angular 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() 事件，从那个函数我发出事件

app.component.html 中声明的调用 changeYearEvent($event);的yearHandler;

当 changeYearEvent 被调用时，它会在 console.log 中显示消息但它没有调用 changeYearEvent

谁能帮我看看这有什么问题。

谢谢。

【问题讨论】：

请查看angular.io/tutorial 以基本了解角度工作以及如何在另一个组件中使用组件

标签： angular angular2-template angular2-services angular2-directives

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

您应该使用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>

【讨论】：