如何从父组件调用路由器出口子组件方法

Question

我是angular2的新手

<parent>
<router outlet><router outlet>
</parent>

我在父组件中有一个按钮,如果我单击该按钮,它应该调用子组件中的方法(在路由器插座中加载.)

有没有办法从父级调用子组件(在路由器插座中)方法.

Answer 1

有了孩子router-outlet,你可以使用ContentChild它来调用孩子的方法.所以...

import { ContentChild } from '@angular/core';

在你的父母:

@ContentChild(ChildComponent)
private childComponent: ChildComponent;

并在您的点击事件上执行:

this.childComponent.doSomething()

您还需要在parent中的providers数组中添加子组件:

@Component({
  selector: 'parent',
  ...
  providers: [ChildComponent]
})

Answer 2

基本上有两种显示组件模板的方法:作为嵌套组件或路由目标.

嵌套组件

如果使用嵌套组件,则组件被视为具有"父组件/子组件"关系.

然后,父组件的Html将如下所示:

<div>
   <child></child>
</div>

其中"child"是子组件的选择器.然后,您可以使用@Input和@Output属性在两者之间进行通信.

有关嵌套组件时此技术的更多信息,请查看以下文档:https://angular.io/guide/component-interaction

路由目标

如果通过在a中显示组件作为路由目标<router-outlet>,那么就没有"父组件"和"子组件"关系.

在这种情况下,组件之间通信的最佳方式是使用服务.

我有一篇关于在这里创建服务的博客文章:https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

资源

如果您是Angular的新手,通过完成教程或在线课程,您可以节省大量的时间和挫折感.这将介绍所有基本概念,以便您快速使用Angular.

你可以在这里学习"英雄之旅"教程:https://angular.io/tutorial

或者观看这样的课程:https://app.pluralsight.com/library/courses/angular-2-getting-started-update

或者这个:https://app.pluralsight.com/library/courses/angular-2-first-look/table-of-contents

(你可以免费注册一周.)

Answer 3

我找到了两种方法来实现这一目标:

1.将主要成分注入儿童

您可以向主组件添加事件,将主组件注入子组件并订阅事件.请参阅说明这一点的插件.但是,现在您的孩子依赖于您的主要组件.这可能不太好.

主要成分

executeAction: EventEmitter<any> = new EventEmitter();
constructor() { }
performAction() {
  this.executeAction.emit();
}

儿童

constructor(private appComponent: AppComponent) {
    this.executeAction = this.executeAction.bind(this);
    eventSubscriber(appComponent.executeAction, this.executeAction);
}
ngOnDestroy(): void {
    eventSubscriber(this.appComponent.executeAction, this.executeAction, true);
}
executeAction() {
    alert('1');
}

2.实施服务

此处以及父和子通过服务进行通信中描述的最佳解决方案是创建一个服务,该服务将成为主要组件和子组件之间的附加层.这样,您将独立于主要组件实现.请参阅说明此方法的插件.

服务

subscription = new Subject();
executeAction() {
    this.subscription.next();
}

主要成分

constructor(private appService: AppService) { }
performAction() {
  this.appService.executeAction();
}

儿童

constructor(private appService: AppService) {
    this.executeAction = this.executeAction.bind(this);
    eventSubscriber(appService.subscription, this.executeAction);
}
ngOnDestroy(): void {
    eventSubscriber(this.appService.subscription, this.executeAction, true);
}
executeAction() {
    alert('1');
}

Answer 4

我认为事件发射器可以为你解决问题

虽然您也可以直接在子组件中使用它，但在这里使用通用服务将是一个很好的做法

首先，您需要在服务中创建一个发射器，例如

export class EmitterService {
   public nameEmitter:EventEmitter<string>=new EventEmitter(); 

    //method to get question
    changeName(name:string){   
        this.nameEmitter.emit(name)    
    }

}

然后在根组件中注入服务依赖项并调用更改名称方法来发出更改

 constructor(private emitter :EmitterService) {}
 this.emitter.changeName("New Name");

最后在子组件中订阅更改

this.emitter.nameEmitter.subscribe(name=>{this.name=name})

这是正在工作的笨蛋

Answer 5

您可以使用共享服务与路由器添加的组件进行通信。

您还可以使用Routeroutlet 的activate 事件让父级知道路由器何时添加组件

模板

<router-outlet (activate)="onActivate($event)"></router-outlet>

成分

  onActivate(componentRef){
    componentRef.works();
  }

儿童补偿

 works(){
    console.log("works");
  }