Question

我想从ES6中的Component发送自定义事件，因此我可以在模板<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

除非使用下面的备用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 - 从组件发送事件

2 个答案: