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

Question

所以，我正在使用 Angular 4 开发应用程序，但我遇到了问题。我想使用 Angular 4 路由在一页中包含两个组件，但它似乎并不像我想要的那样可行。我有一个组件标题，它只是一个导航栏，我还有另一个组件home，它已经有一个导航栏，所以我不想在 home 中包含标题，但是例如使用其他一些组件登录。所以我尝试查看角度文档，最接近的方法是使用孩子，但我不希望login成为header的孩子。我尝试在我的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