从路由加载子组件时从父组件触发子组件方法

Posted 2023-02-23

【中文标题】从路由加载子组件时从父组件触发子组件方法

【英文标题】：Trigger Child Component Method from Parent Component when child component loaded from the routing

【发布时间】：2018-03-09 19:51:10

【问题描述】：

我创建了一个子组件，它有一个我想在调用父组件方法时执行的方法。

这似乎是重复的问题，如下所示。

Call child component method from parent class - Angular

当我在父组件模板中包含子组件时，这非常有效，例如

<parent-comp> <child-comp></child-comp></parent-comp>.

但是，在我的情况下，我使用路由加载子组件，在这种情况下，我无法执行子方法，因为 viewchild 为 null。

下面是快速启动 Angular 应用程序，其中包含我的更改。

import  Component, ViewChild  from "@angular/core";
import  ItemCompanyComponent  from "../item/Company/ItemCompanyComponent";

@Component(
    moduleId: module.id,
    selector: "item-add",
    templateUrl: "ItemComponent.html"
)
export class ItemComponent 

    @ViewChild(ItemCompanyComponent) public child: ItemCompanyComponent;

    ngAfterViewInit(): void 
        this.save = () =>  
            alert("Item Component Save");
            this.child.childsave();
        
    

    save(): void 

    




@Component(
    moduleId: module.id,
    selector: "item-company",
    templateUrl: "ItemCompanyComponent.html"
)
export class ItemCompanyComponent 
 childsave(): void 
        alert("Item Company Component Save");
    

ItemComponent.html：

<div class="main-content" fxFlex>
            <router-outlet></router-outlet>
        </div>

项目组件中的子属性为空。任何解决方案都非常可观。

【参考方案1】：

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

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

<router-outlet (activate)="notifyChild()"></router-outlet>

【讨论】：

我有近 20 个子组件。它们将通过路由加载。所以当我点击父组件中的保存时，需要调用加载的子组件保存。有了这个（活动的）事件发射器，这可能实现吗？如果没有，我怎么能做到？

Active 仅通知您添加了一个组件。如果您想通知“保存”，似乎不需要使用(activate)="..."。其余的可以使用共享服务来完成。关于使用共享服务进行组件通信的问题大约有 1k 个，angular.io 上的文档也包含“组件通信”部分。

我不认为在这种情况下共享服务是一个好方法。我们还有什么选择？

实际上我认为共享服务是唯一明智的方法（因为如果组件不是直接的父/子或直接兄弟，并且不像路由器那样动态添加，它几乎总是在组件之间进行通信）

好的，如果没有房间开放我会进入这个。感谢您的及时解决。