Angular2: Call function from parent component

Question

I'm facing a problem which has been mentioned some times ago but those solutions like this one: What is the proper use of an EventEmitter?

I want to take this example on the shared link to keep it easy:

Let's start: First, I have those routes in app.module.ts:

{path: 'dash/:project_id', component: DashProject, children: [
    {path: '', component: null},
    {path: 'task/form', component: TaskForm},
    {path: 'task/:task_id', component: TaskView}

As you can see, DashProject is my parent and those other are children. I've also included to the template of DashProject the required

<router-outlet></router-outlet>

part to include children there.

But in this mentioned example I need to include

<child (notifyParent)="getNotification($event)"></child>

Now I made it like this in my parent template:

<child (notifyParent)="getNotification($event)"></child> <router-outlet></router-outlet>

Problem: When I add <child (notifyParent)="getNotification($event)"></child> to my parent template the child component is already included to the parent, even it's not called by URL routing. When I remove the part, the interaction between parent-child doesn't work anymore. If I add those to the child template I get a never ending loop and crash.

Can anyone see my problem or know what is causing this error? I saw some examples on the net, like the shared one above, and all were using a similar solution, but it won't work for me.

Thanks in advance!

Kind regards, yadbo

score 2 · Accepted Answer · answered Apr 14 '17 at 23:05

It looks like you may be merging two different techniques.

Use routing when you want to route to a component. For example, route to the dash project page or the task form page. Normally routed components have no selector and are not directly referenced in the HTML. Rather, they appear in the <router-outlet>.

Use nested components when you want to use a component as a child component of another component. For example, display a set of stars instead of a rating in the project page. The nested component must have a selector and that selector is used in the HTML (like your <child> example.)

When using nested components, you can use @input and @output to communicate between the parent and child.

When using routed components, you can communicate between the components by passing parameters (required, optional, or query parameters), by using a shared resolver, or by setting up properties in a service.

score 0 · Answer 2 · answered Apr 14 '17 at 23:54

Thanks you @DeborahK for your hint, that was I was missing.

Now I'm using a shared service for solving this problem, I'm passing a callback to the shared service which I call from the child.

Here is an example, at least the idea, how it works:

export class SharedService {
    private callback:any = null;

    public constructor() {
    }
    public getCallback() {
        return this.callback;
    }

    public setCallback(call) {
        this.callback = call;
    }
}

Parent:

this._shared.setCallback(this.test.bind(this));

Child:

this._shared.getCallback()();

And yes, it works :)

Angular2: Call function from parent component

2 Answers2