带有命名插座子组件的Angular 5问题答案

【问题标题】：Angular 5 issue with a named outlet children component带有命名插座子组件的Angular 5问题
【发布时间】：2018-10-04 23:04:18
【问题描述】：

我是 Angular 5 的新手，我正在尝试做我的第一个路由。这里的情况。我有 app.component 作为根组件和其他三个不同的组件，我想通过角度路由系统“驱动”，这里是 html 代码：

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>
<div id="main-content" class="container-fluid">
  <router-outlet name="mainContentOutlet"></router-outlet>
  <!--<app-xsoccer-content></app-xsoccer-content>-->
</div>
<div id="divider" class="container-fluid">
  <div class="footer-divider"></div>
</div>
<div class="container-fluid">
  <app-xsoccer-footer></app-xsoccer-footer>
</div>

这里是我的路由表：

const appRoutes: Routes = [
    { path: '', component: XsoccerHeaderComponent, children: [
        {path: '', component: BrowserMainMenuComponent},
        {path: 'home', component: BrowserHomeMenuComponent}
    ]},
    { path: '', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [
        {path: '', component: WelcomeContentComponent, outlet: 'mainContentOutlet'},
        {path: 'home', component: HomeContentComponent, outlet: 'mainContentOutlet'},
    ]},
    {path: '**', component: PagenotfoundComponent}
  ];

在应用程序启动时，组件：XsoccerHeaderComponent、BrowserMainMenuComponent、XsoccerContentComponent、WelcomeContentComponent 被完美加载和渲染。

但是，一旦我单击了一个登录按钮，我将其作为 BrowserMainMenuComponent 的子项放置，在完成一些身份验证逻辑之后，我就会从中触发 Router.navigate(['home'])；结果只有 BrowserHomeMenuComponent 会被渲染，而 HomeContentComponent 不会。

你们中的一些人可以提供任何帮助。

非常感谢。

【问题讨论】：

标签： routes components angular5 children

【解决方案1】：

您不能在顶级路线上有 2 条空白路线，请尝试将 { path: '', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [ 行替换为 { path: 'content', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [ 之类的内容。然后用this.router.navigate(['/content/home'])调用它

【讨论】：

什么不起作用？你能说得更具体点吗？
当然，在 'path' 标签中，我将根 (' ') 路由替换为 'content' 路由，但没有任何反应，实际上应用程序甚至在启动时都没有加载欢迎组件。我在下一篇文章中附上了一张关于我的问题的图片（Angular 5 issue with a named outlet children component (resprise)），也许它可以更有效并阐明我想要实现的目标。还是非常感谢。