javascript - Angular 2自定义事件未被模板捕获

Question

我遇到了涉及 Angular 2 中自定义事件的问题。

我需要在单击特定 DOM 元素后引发 cusotm 事件。我能够发出该事件，但看起来该事件没有被应该监听的模板捕获。这是我的代码:

SidebarContent.ts:

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



@Component({
    selector: 'ico-sidebar-content'
    , templateUrl: 'App/Pages/Filters/SidebarContent/SidebarContent.html'

})

export class SidebarContent {
    @Output('open') open = new EventEmitter();

    constructor() {
    }

    public emitEvent() {
        console.log("clicked!");
        this.open.emit(null);
        console.log("maybe emitted");
    }
}

当我单击 SidebarContent.html 中的以下元素时，将调用 emitEvent() 函数:

<li (click)="emitEvent()" *ngFor="#value of filter.values"><a><i
                                class="fa {{value.faIconClass}}"></i>{{value.name}}</a></li>

现在，应该捕获事件的类位于 FilterTiles.ts 中:

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

@Component({
    selector: 'ico-filter-tiles'
    , templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'
})


export class FilterTiles {
    public tiles = [{
            title: 'Sesso',
            faIconClass: 'fa-users',
            values: [
                'griffin'
                , 'simpson'
            ]
        }];

    public open(){
        console.log('Got it!'); 
    }
}

最后 FilterTiles.html (我尝试将事件绑定(bind)到上面的 open() 函数的模板):

<h1 (open)="open()" (click)="open()">heeee</h1>
<div *ngFor="#tile of tiles" class="col-md-4">
    <div class="x_panel ico_filter_tiles">
        <div class="panel-heading">
            <h3 class="x_title">
                <i class="fa fa-map"></i><span class="panel-title-label">Azienda
                    di residenza</span> <a href="javascript:void(0);"><i
                    class="indicator glyphicon glyphicon-remove pull-right ico_remove"></i></a>
            </h3>
        </div>
        <div class="x_content">
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-12">

                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <br>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <form class="form-horizontal">
                            <fieldset>
                                <ul class="ico_filter_ul_select form-control">
                                    <li *ngFor="#value of tile.values"><div class="checkbox">
                                            <label><input type="checkbox">ABCDE</label>
                                        </div></li>
                                </ul>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

我无法找到我的错误，请问有人可以帮助我吗？

谢谢;)

Answer 1

事实上，可以在应用 SidebarContent 组件的地方捕获该事件。在您的情况下，名称为 ico-sidebar-content 的元素:

<ico-sidebar-content (open)="doSomething()"></ico-sidebar-content>

您在一个简单的 h1 元素上定义了它，该元素与 SidebarContent 组件不对应。

编辑

如果您想让两个组件进行通信，您可以在共享服务中利用 EventEmitter。

@Injectable()
export class MyService {
  constructor() {
    this.myEvent = new EventEmitter();
  }
}

@Component({
})
export class SidebarContent {
  constructor(private service:MyService) {
  }

  emitEvent() {
    service.emit('data');
  }
}

@Component({
})
export class BodyContent {
  constructor(private service:MyService) {
  }

  listenEvent() {
    service.subscribe(
      data => {
        // do something with data
      }
    );
  }
}

请小心定义服务提供者，以使组件共享同一实例(例如，在 bootstrap 函数内)。 希望对你有帮助， 蒂埃里