来自子路由的父路由的角度访问方法答案

【问题标题】：Angular access methods of parent routes from child routes来自子路由的父路由的角度访问方法
【发布时间】：2018-02-09 03:46:25
【问题描述】：

所以为了清楚地解释我的问题，我的应用程序中的每个实体都有一个组件，例如 Author 组件和 Book 组件。对于它们中的每一个，我将有两个子组件，一个列表组件和一个表单组件。

所以基本上我的路线配置是这样的：

export const routing = RouterModule.forRoot([
    {
        path: 'author', component: AuthorComponent,
        children: [
            { path: 'author-list', component: AuthorListComponent },
            { path: 'author-form', component: AuthorFormComponent }
        ]
    },
    {
        path: 'book', component: BookComponent,
        children: [
            { path: 'book-list', component: BookListComponent },
            { path: 'book-form', component: BookFormComponent }
        ]
    }
]);

例如，在我的 AuthorComponent 中，我有一个方法可以删除调用该服务的作者：

deleteBadge = (event): void => {
    // Call delete service
    this._badgeService.delete(event).subscribe(
      result => {
        // Good
      },
      error => {
        // Error
}

我的问题是如何从我的路由子组件（作者列表或表单组件）调用该方法，因为我知道我不能像使用事件的普通子组件一样调用它。

PS：我将方法（和许多其他方法）放在父组件中，因为我需要在两个子组件中访问它以避免冗余。

【问题讨论】：

使用可观察的共享服务来通知侦听器他们需要做出反应的事件。
我觉得服务方法真的很丑。我的意思是如果我必须将一个简单的小信息传递给一个孩子，我需要为它创建一个全新的服务？不适合我@GünterZöchbauer
如果您认为某项服务因此而丑陋，您将不会很喜欢 Angular。这就是在同一组件模板中静态地在不是父/子（或兄弟）的组件之间进行通信的方式。
君特是对的。也许你可以有一个通用的通信服务，它结合了几个通信 observables。
@MeMeMax 我对服务本身没有任何问题，但老实说，创建一个全新的服务来传递字符串对我来说似乎很重。但是您关于管理组件之间通信的通用服务的想法看起来非常好，您有参考吗？

标签： javascript angular typescript routes angular-routing

【解决方案1】：

标准做法是为Component Interaction 使用共享服务。但是，如果您仍想避免使用共享服务，可以使用Injector API。

在您的子组件中，例如AuthorListComponent，执行以下操作：

import { Injector } from '@angular/core';
import {AuthorComponent} from "./author.component";
// ....

constructor(private injector:Injector){
    let parentComponent = this.injector.get(AuthorComponent);
    parentComponent.deleteBadge('String passed from AuthorListComponent');
}

这是working demo的链接。

【讨论】：

啊，这真的很有趣。你知道这是否是一个好习惯吗？
这不是标准做法，正如我在回答中所写的那样。这是另一种方式，因为您不想使用共享服务。
用 @ViewChild() 代替这个怎么样？我认为我们也可以达到相同的结果，但我不确定哪个更好？

【解决方案2】：

使用一个通信服务，它将多个通信可观察对象联合起来。

可以在官方 Angular 文档中找到一个示例：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

【讨论】：