在组件的模板中使用 eventEmitter.emit()答案

【问题标题】：use eventEmitter.emit() in component's template在组件的模板中使用 eventEmitter.emit()
【发布时间】：2018-08-28 05:26:26
【问题描述】：

编辑

我有一个TemplateRef 在 HTML 模板中以相同的名称引用！

<ng-template #eventEmitter>

很抱歉，仍然保留问题以引用错误代码。

老问题

我试图在组件的模板something.component.html 中使用emit() 实例的emit() 方法

<div (click)="eventEmitter.emit()">click me</div>

并在我的组件中定义something.component.tslike

@Output() eventEmitter = new EventEmitter<any>();

并得到以下错误

"jit_nodeValue_3(...).emit is not a function"

我在the doc 或guide 中找不到对此的任何引用，并对这种行为感到好奇，有人有真正的解释吗？

【问题讨论】：

这是example in StackBlitz

标签： angular components eventemitter

【解决方案1】：

在Output 上设置EventEmitter：

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

@Component({
    selector: 'demo',
    template: `<h1>Demo</h1>
    <button (click)="notify.emit('hello')">Notify</button>`
})
export class DemoComponent {
    @Output() notify = new EventEmitter<any>();
}

订阅活动：

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

@Component({
    selector: 'app',
    template: `<h1>App</h1>
    <demo (notify)="receiveNotification($event)"></demo>`
})
export class AppComponent {
    notifications = new Array<any>();

    receiveNotification(notification: any) {
        this.notifications.push(notification);
    }
}

完整的example in StackBlitz

【讨论】：