Вызов функции для дочернего компонента из родительского

Я ищу способ вызвать функцию дочернего компонента из родительского компонента. У меня есть 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
person manidos    schedule 28.12.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете сделать это с помощью EventEmitter.

Определите эмиттер в вашем компоненте

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

Запустить эмиттер в родительском

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

Сделайте что-нибудь в модальном режиме

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

arrow_upward
1
arrow_downward

Вы можете использовать свойство @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 в вашем родительском компоненте, и вы можете использовать для него любые функции.

person michali    schedule 28.12.2016