Angular2 getting string value from a route child

Question

I need set the header title from child route view...
I have the parent component:

    @Component({
        selector: 'parent-component',
        template: `
<header>{{headerTitle}}</header>
<router-outlet></router-outlet>
`,
        directives: [ROUTER_DIRECTIVES]
    })
    @RouteConfig([
        { path: '/link1', name: 'Link1', component: Link1Component, useAsDefault: true },
        { path: '/link2', name: 'Link2', component: Link2Component },
    ])

    export class ParentComponent {

        public sharedHeaderTitle: string;
        constructor(public router: Router) { }

    }

Have a childs routing tabs:

@Component({
    template: '<div></div>'
})

export class Link1Component {
    public headerTitle: string;
    constructor() {
        this.headerTitle = "Link1 page";
    }
}

and another one

@Component({
    template: '<div></div>'
})

export class Link2Component {
    public headerTitle: string;
    constructor() {
        this.headerTitle = "Link2 page";
    }
}

How it make in parent-childs I found here but its not working with routing...
What is best way to make it?

SOLVED

I found one solution, think it's the best way:
http://plnkr.co/edit/LYTXmY9Fwm8LwumICWDT

score 0 · Answer 1 · edited May 23 '17 at 11:46

Link1Component and Link2Component need to communicate to ParentComponent. Since they are confined in a router-outlet I am not sure whether this is possible other than subscribing to a router event (see How to detect a route change in Angular 2?)

I would also consider to change a bit the design and move the responsibility of setting the title to the ParentComponent, i.e. the ParentComponent sets the title before issuing the router.navigate(['LinkXComponent'] command.

I hope this helps

Angular2 getting string value from a route child

SOLVED

1 Answers1