Angular 5问题，带有命名的直销子代组件 [英] Angular 5 issue with a named outlet children component

问题描述

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

I am quite new in Angular 5 and I am trying to do my first routing. Here the situation. I have the app.component as root component and others three different component that I would like to "drive" by angular routing system, here the html code:

<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，BrowserMainMenuComponen t，XsoccerContentComponent，WelcomeContentComponent已完美加载并呈现。

At application start the components: XsoccerHeaderComponent, BrowserMainMenuComponent, XsoccerContentComponent, WelcomeContentComponent are perfectly loaded and rendered.

但是，当我单击登录按钮时，我将其作为BrowserMainMenuComponent的子级放置，然后触发了Router.navigate（ ['home']），然后完成一些验证逻辑；结果将仅呈现BrowserHomeMenuComponent而不会呈现HomeContentComponent。

But as soon as I click a login button, which I placed as BrowserMainMenuComponent's children I'm firing Router.navigate(['home']) from it, after having done some authentication logic; with the result that only BrowserHomeMenuComponent will be rendered while HomeContentComponent not.

有些人可以提供任何帮助。

Some of you guys can give any help please.

非常感谢。

推荐答案

您在顶层路由上不能有2条空白路由，请尝试换行 {路径：，组件：XsoccerContentComponent，出口： mainContentOutlet，子对象：[，带有类似 {的路径： content，组件：XsoccerContentComponent ，插座： mainContentOutlet，子级：[。然后使用 this.router.navigate（[’/ content / home’]）

You cant have 2 blank routes on the top level of routes, try swapping the line { path: '', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [ with something like { path: 'content', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [. Then call it with this.router.navigate(['/content/home'])

这篇关于Angular 5问题，带有命名的直销子代组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！