Angular 4路由 - 是否可以有两个路由器组件答案

【问题标题】：Angular 4 routing - is it possible to have two router componentsAngular 4路由 - 是否可以有两个路由器组件
【发布时间】：2017-10-05 03:25:12
【问题描述】：

所以，我正在使用 Angular 4 开发应用程序，但我遇到了问题。我想使用 Angular 4 路由在一页中包含两个组件，但它似乎并不像我想要的那样可行。我有一个组件 header，它只是一个导航栏，我还有另一个组件 home，它已经有一个导航栏，所以我不想包含 header 与 home，但与其他一些组件 login 例如。所以我尝试查看角度文档，最接近的方法是使用孩子，但我不希望 login 成为 header 的孩子。我尝试将 router-outlets 和两个组件放入我的 app.module.ts 文件中，但没有成功。

【问题讨论】：

是的。这是可能的，而且很容易:)
使用辅助路由：angular.io/docs/ts/latest/guide/router.html#secondary-routes
我这里有一个例子：github.com/DeborahK/Angular-Routing
@DeborahK 不错的代码示例，您应该将其作为答案，我会 +1。 :)

标签： angular routing angular4-router

【解决方案1】：

您的主要组件可以显示在默认路由器插座中，而第二个组件可以显示在辅助的命名路由器插座中，如下所示：

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <router-outlet></router-outlet>
        </div>
        <div class="col-md-2">
            <router-outlet name="popup"></router-outlet>
        </div>
    </div>
</div>

然后您可以像这样路由到辅助路由：

this.router.navigate([{outlets: { popup: ['messages']}}]);

您可以在此处查看完整示例：https://github.com/DeborahK/Angular-Routing

【讨论】：