Question

我在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']）;结果是，只有HomeHtentComponent才会渲染BrowserHomeMenuComponent。

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

非常感谢。

Answer 1

您无法在最高级别的路线上设置2条空白路线，请尝试使用类似{ path: '', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [的内容交换{ path: 'content', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [行。然后使用this.router.navigate(['/content/home'])

调用它

Angular 5问题与一个名为outlet子组件

1 个答案: