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 函数中)。希望对你有帮助蒂埃里