Angular 2 ES6 - 从组件发送事件

Question

我想从 ES6 中的组件发送一个自定义事件，所以我可以在模板中收听它 <component (someEvent)="someFunction()">，但我无法实现它。

@Component's 属性 ouputs 或 events 正在破坏应用程序。我错过了什么吗？

这是我的组件声明：

import {Component, Output} from 'angular2/core';

@Component({
    selector: 'section-navigator-component',
    templateUrl: 'build/components/section_navigator/section_navigator.html',
    inputs: [ 'resources', 'attr' ],
    outputs: [ 'someEvent' ]
})


export class SectionNavigatorComponent {
    constructor() {

    }

    resourceClickHandler($event, resource) {

    }
}

Answer 1

这应该适用于您的情况：

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

@Component({
    selector: 'section-navigator-component',
    templateUrl: 'build/components/section_navigator/section_navigator.html',
    inputs: [ 'resources', 'attr' ],
    outputs: [ 'someEvent' ]
})


export class SectionNavigatorComponent {

    constructor() {
      this.someEvent = new EventEmitter();
    }

    resourceClickHandler($event, resource) {
      this.someEvent.emit(someValue);
    }
}

Answer 2

您不需要导入 'Output' 除非您使用下面的备用 TypeScript 语法：

import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
    selector: 'section-navigator-component',
    templateUrl: 'build/components/section_navigator/section_navigator.html'
})


export class SectionNavigatorComponent {
    @Input() resources: any;
    @Input() attr: any;

    @Output() someEvent: EventEmitter<any> = new EventEmitter();

    constructor() {
    }

    resourceClickHandler($event, resource) {
      this.someEvent.emit(someValue);
    }
}

Angular 2 ES6 - 从组件发送事件

Angular 2 ES6 - Sending event from component

ecmascript-6

ionic-framework

ionic2

angular