Question

我需要从子路径视图设置标题标题...
我有父组件：

    @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) { }

    }

有一个子路由选项卡：

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

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

和另一个

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

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

它如何在亲子中找到here，但它不适用于路由...
什么是最好的方法？

的解决

我找到了一个解决方案，认为这是最好的方法：
http://plnkr.co/edit/LYTXmY9Fwm8LwumICWDT

Answer 1

Link1Component和Link2Component需要与ParentComponent进行通信。由于它们被限制在路由器插座中，我不确定这是否可能除了订阅路由器事件（参见How to detect a route change in Angular 2?）

我还会考虑更改设计并将标题设置为ParentComponent的责任，即ParentComponent在发出router.navigate(['LinkXComponent']命令之前设置标题。< / p>

我希望这会有所帮助

Answer 2

您可以创建一个单独的服务，只要您需要处理标题（要么更改它或获取它的值），就会注入该服务。

参考：https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Angular2从路由子获取字符串值

的解决

2 个答案: