コンポーネントが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の複数のインスタンスを持つことができると仮定すると、これは可能ですか？

1. 子の親
へ
2. 親子
へ

子供子から親に伝える親

に追加することによって行うことができます。

Answer 1

あなたは2つの通信フォームを必要とします子にはEventEmmiter、親にはイベントをサブスクライブします。子を呼び出すには

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

親

子供

へ：

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

親コンポーネントコード：親を呼び出し はEventEmitter

子コンポーネントのコードにemitを呼び出すことによって行われます最初にコンポーネントへの参照を取得する必要があるコンポーネントです。これは01を使用して行われます同じ種類のコンポーネントが複数ある場合はとなります。

親コンポーネントコード：このplnkr

注で

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

} 

例：そのような共通のサービスを使用するなどの構成要素間で通信するための他の方法があります。