从子路径到父路径的角度访问方法

Question

So to explain clearly my problem, I have a component for each of my entities in my application like Author component and Book component. And for each of them I will have two child which is a list component and a form component.

So basically my route configuration look like this :

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 }
        ]
    }
]);

In my AuthorComponent for example I have a method to delete an author that call the service :

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

My question is how can I call that method from my route child (author list or form component) knowing that I can't call it like a normal child component using event.

PS: I put method (and many other) in the parent because I need to access to it in both child components and so to avoid redundancy.

Answer 1

Standard practice is to use a shared service for Component Interaction . However, if you still want to avoid using a shared service, you can use the Injector API .

In your child component, AuthorListComponent for example, do the following:

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');
}

Here is a link to working demo .

Answer 2

Use a communication Service which unites several communication observables.

An example can be found in the official Angular docs: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service