Question

我正在寻找一种从父组件调用子组件上的函数的方法。我有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;
  }
}

HERE'S 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
});

从父级调用子组件上的函数

2 个答案: