从父组件调用子组件上的函数答案

【问题标题】：Call a function on child component from parent从父组件调用子组件上的函数
【发布时间】：2017-10-25 19:27:43
【问题描述】：

我正在寻找一种从父组件调用子组件函数的方法。我有一个ModalComponent（父母）和MessageComponent（孩子）。我需要启用它们之间的通信。在 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

【问题讨论】：

标签： angular angular2-components

【解决方案1】：

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

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

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

在父级中触发发射器

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

在模态中做一些事情

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

【讨论】：

【解决方案2】：

您可以使用@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 的引用，你可以在它上面使用任何函数。

【讨论】：