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

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

我需要在单击特定DOM元素后抛出一个cusotm事件。我能够发出该事件，但该事件似乎未被应侦听的模板捕获。这是我的代码：

SidebarContent.ts：

单击SidebarContent.html中的以下元素时，将调用emitEvent函数：

最后，FilterTiles.html我尝试将事件绑定到上面的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>

我找不到我的错误，你们中有人能帮我吗

---

谢谢大家,

事实上，可以在应用SidebarContent组件的地方捕获事件。在您的示例中，名称为ico边栏内容的元素：

请小心定义服务提供者，以使组件共享同一实例，例如，在引导功能中。 希望它能帮助你，

---

Thierry

您可以做的是向两个组件的父组件发出事件，然后绑定到另一个组件上的输入。我更喜欢蒂埃里的方式，但我还没有完全把心思放在服务上。事实上，他的回答帮助我更好地理解了他们

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

@Component({
selector: 'ico-filter-tiles'
, templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'
})
inputs:['catchEvent'] // <--- Added this


export class FilterTiles implements OnChanges{ // <--- Added this
public tiles = [{
        title: 'Sesso',
        faIconClass: 'fa-users',
        values: [
            'griffin'
            , 'simpson'
        ]
    }];

public catchEvent; // <--- Added for easier code completion,not needed

ngOnChanges(e){ // <--- Added this, make sure to import OnChanges
    if(e['catchEvent']{
        this.open();
    }
}

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

然后加上

如果这样做，基本上就是将父组件用作中介。您可能更容易理解这种方式，但我建议您尝试学习服务的工作方式

---

我不喜欢传递它的原因是因为最终在根组件或父组件中有一堆额外的函数/方法。

h1元素没有发出打开的输出。它必须在模板的另一部分中。你能发布过滤器的完整模板吗？我发布了完整模板。元素不发出开放输出是什么意思？谢谢，如果我想让一个组件监听另一个组件发出的事件呢？因为在这里，当边栏发出该事件时，我需要修改我的BodyContent。如何让BodyContent侦听SidebarContent发出的事件？要做到这一点，您可以在共享服务中利用EventEmitter。我更新了我的答案。。。

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!'); 
    }
}

<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>

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

@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
      }
    );
  }
}

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

@Component({
selector: 'ico-filter-tiles'
, templateUrl: 'App/Pages/Filters/Components/FilterTiles/FilterTiles.html'
})
inputs:['catchEvent'] // <--- Added this


export class FilterTiles implements OnChanges{ // <--- Added this
public tiles = [{
        title: 'Sesso',
        faIconClass: 'fa-users',
        values: [
            'griffin'
            , 'simpson'
        ]
    }];

public catchEvent; // <--- Added for easier code completion,not needed

ngOnChanges(e){ // <--- Added this, make sure to import OnChanges
    if(e['catchEvent']{
        this.open();
    }
}

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

openFilterTiles(){
    this.someVarToBind = true;
}