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

Question

所以，我正在使用 angular 4 开发应用程序，但我遇到了问题。我想使用 angular 4 路由在一个页面中包含两个组件，但它似乎无法按照我想要的方式执行。我有一个组件 header，它只是一个导航栏，我还有另一个组件 home，它已经有一个导航栏，所以我不不想将 header 包含在 home 中，而是将一些其他组件包含在 login 中例子。所以我试着查看 angular 文档，最接近的方法是使用 childs，但我不希望 login 成为 [= header 的 36=]。我尝试将 router-outlets 和两个组件放入我的 app.module.ts 文件中，但没有成功。

Answer 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

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

Angular 4 routing - is it possible to have two router components

angular

routing

angular4-router