从父组件调用子组件的功能

问题描述：

我正在寻找一种方法来从父组件中调用子组件的功能。我有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

答

你可以用EventEmitter来做到这一点。

在组件

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

触发发射父

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

做一些模态

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

定义发射器

答

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

从父组件调用子组件的功能

相关推荐