Angular 2：直接父组件不监听子组件发出的事件

Question

我有一个基本的 Angular 应用程序，包含以下 3 个组件：

1. car-component 是主组件或父组件。
2. carousel-component（car-component 的子组件，*使用 ng-content）
3. 子组件（轮播组件的子组件）

子组件内的按钮在单击时使用 EventEmitter() 发出事件。从 plunker 中的代码可以看出，汽车组件（即主组件或主组件）能够监听并捕获其 child 的子组件（即 child -component.ts) 和 {{text}} 在汽车组件模板中更新。

但是，carousel-component 是子组件的直接父级未能捕获相同的事件，并且在 carousel-component 内没有更新任何文本。 p>

car-component.ts

import  {Component} from 'angular2/core';
import {CarouselComponent} from './carousel-component';
import {Child} from './child.component';

@Component({
    selector: 'my-app',
    template: `
              <div style="border:1px solid #CCC; padding: 5px; margin: 5px;">
                car-comp txt: {{text}}
                <carousel-component>
                    <child (changed)="onChange($event)"></child>
                </carousel-component>
              </div>
    `,
    directives : [Child, CarouselComponent]
})
export class CarComponent {

    text: string = '?';

    onChange(value) {
        console.log('car-component onChange fn..');
       this.text = value;
    }

}

carousel-component.ts

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

@Component({
    selector: 'carousel-component',
    template: `
                <div style="background: #CCC; padding: 10px;">
                <div>carousel-component txt: {{carouselTxt}}</div>
                <ng-content></ng-content>
                </div>
             `,
})
export class CarouselComponent {

    carouselTxt: string = '?';

    changed = new EventEmitter();

    onChange(value) {
        console.log('carousel-comp onChange called..');
        this.carouselTxt = value;
    }

}

child.component.ts

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

@Component({
    selector: 'child',
    template: `
                <div style="background: #FFF; padding: 10px;">
                child-comp txt: 
                <input type ="text" #textInput value="{{txt}}">
                <button (click)="onChange(textInput.value)">Emit</button>
                </div>
             `,
    outputs:['changed']
})
export class Child {

    txt: string = 'abc';

    changed = new EventEmitter();

    onChange(value) {
        this.txt = value;
        this.changed.emit(value);
    }

}

谁能告诉我我哪里出错了？

https://plnkr.co/edit/h9mjlo?p=preview

Answer 1

在 CarouselComponent 中使用 ContentChildren 和 ngAfterContentInit，无需添加服务“或”将模板移出汽车组件模板。

export class CarouselComponent {

    carouselTxt: string = '?';

    @ContentChildren(Child) childItems:QueryList<Child> = new QueryList<Child>();

    ngAfterContentInit () {
      this.childItems.toArray().forEach((item, n)=>{
        item.changed.subscribe(
          (val)=> { this.carouselTxt = val; },
          (e)=> { console.log('e::', e); },
          (c)=>{ console.log('c::', c); }
        );
      });
    }

}

解决方案：https://plnkr.co/edit/x2mO0r?p=preview

Answer 2

正如@Ricardo car-component 在最后一个答案中提到的那样，它有子组件的选择器。要监听 carousel-component 中的事件，请从 car-component 模板中删除子组件并将其添加到 carousel-component 模板中。并且您可以在轮播组件中再添加一个事件发射器，它将到达作为汽车组件的父级。您可以通过 onChange() 函数触发的那个事件

Answer 3

在您的汽车组件中，您正在监听孩子的事件发生变化并将其绑定到 onChange。由于这是在您的汽车组件模板中，因此它仅将其绑定到汽车组件的 onChange 方法，而不是轮播组件的。

要使子组件的更改事件对其所有分层父级可见，请创建一个所有父级都订阅的服务。可以在此处找到有关如何执行此操作的指南：https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service