如何使组件与Angular 2中的嵌套对话框组件交互？

Question

我有一个通用组件。该组件有N个按钮，其中N可由父级设置。父组件可以具有此通用组件的多个实例。当在通用组件上单击按钮时，我需要通知父组件已按下此按钮，以及某种方式来识别已按下哪个按钮。然后我需要让父组件能够在嵌套组件上调用一些函数。这是我想要做的一个非常粗略的例子：

@Component({
    selector: 'parent-component',
    ...
})
export class ParentComponent{
    public OnGenericComponentButtonPress(someId){
       if (someId === "foo"){
           genericComponentInstance.closeComponent();
       }else{
           doOtherThing();
       }
    }
}


@Component({
    selector: 'generic-component',
    ...
})
export class GenericComponent{
    public closeComponent(){}
}

我需要一些方法来这样来回沟通。假设父组件可以有多个GenericComponent实例，这可能吗？

Answer 1

您需要2种沟通形式：

1. Child to Parent
2. 父母与孩子

Child to Parent

可以通过在孩子身上添加EventEmmiter并在父母上订阅活动来完成从孩子到父母的沟通。 通过致电emit

上的EventEmitter来呼叫父母

子组件代码：

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

@Component({
   selector: 'my-child',
   template: '<h2>{{myText}}</h2><button (click)="onClick()">do something</button>'
})
export class ChildComponent { 
  private myText = "Child Component";
  @Output() clicked: EventEmitter<any> = new EventEmitter();

  public onClick() {
    this.clicked.emit();
  }
}

父组件代码：

import { Component} from '@angular/core';
import { ChildComponent } from "./child.component";

@Component({
  selector: 'my-app',
  template: `<h1>Parent component</h1>
             <my-child (clicked)="doSomething()"></my-child>`,
  directives: [ChildComponent]
})
export class AppComponent {
    public doSomething() {
       do something...
    }
}

父母与孩子

要调用子组件，我们首先需要获得对组件的引用，如果我们有多个相同类型的组件，则可以使用ViewChildren来完成。

父组件代码：

import { Component, ViewChildren, QueryList} from '@angular/core';
import { ChildComponent } from "./child.component";

@Component({
selector: 'my-app',
template: `<h1>Parent component</h1>
            <my-child></my-child>`,
directives: [ChildComponent]
})
export class AppComponent { 
@ViewChildren(ChildComponent) children:QueryList<ChildComponent>;

public callChild(){
    this.children.toArray()[0].doSomething();
}

}

此plnkr
中的

示例

注意：还有其他方法可以在组件之间进行通信，例如使用公共服务。