从 parent 调用 child 组件上的函数

Question

我正在寻找一种方法来从 parent 组件调用 child 组件上的函数。我有一个 ModalComponent(parent) 和 MessageComponent (child)。我需要启用它们之间的通信。使用共享服务可以在 Angular 1 中完成。我想知道 Angular 2 在这种情况下是否可以提供更多东西。无论如何，你能看看吗？

这里是相关的路线：

  { 
    path: 'modal', 
    component: ModalComponent, 
    outlet: 'modal',
    children: [
      {
        path: 'message',
        component: MessageComponent
      }
    ]
  }

ModalComponent 在其模板中有一个按钮和一个 router-outlet（用于承载 MessageComponent）。我需要按下 ModalComponent 模板中的按钮并触发 MessageComponent 上的函数。

这里是 ModalComponent：

@Component({
  template: `
   <div class="footer">  
    <button (click)="action('accept')">Accept</button>
   </div>
  `,
})

export class ModalComponent {
 action(type: string){
   switch(type){
     case 'accept':
       break;
   }
 }
}

这里是 MessageComponent：

@Component({
  template:`
    <div>String sent: <b>{{actionName}}</b></div>
    `,
})
export class MessageComponent {
  actionName: string;
  action(name){
    this.actionName = name;
  }
}

这里是PLUNKER

Answer 1

您可以使用@viewChild 属性:

@Component({
 template:`<div>String sent: <b>{{actionName}}</b></div>`,
})
export class MessageComponent {

  @ViewChild(MessageComponent)
  private messageContent : MessageContent;

  actionName: string;
  action(name){
    this.actionName = name;
  }
}

然后您在父组件中有一个对 MessageComponent 的引用，您可以在其上使用任何函数。

Answer 2

您可以使用 EventEmitter 来做到这一点。

在您的组件中定义一个发射器

@Output() public myEmitter = new EventEmitter();

触发父级中的发射器

this.modal.content.myEmitter.next(this.id);

在模态中做一些事情

this.myEmitter.take(1).subscribe((id: number) => {
  //do something
});

从 parent 调用 child 组件上的函数

Call a function on child component from parent

angular2-components

angular