带有命名插座子组件的 Angular 5 问题 [英] Angular 5 issue with a named outlet children component

问题描述

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

<路由器插座></路由器插座>
<div id="main-content" class="container-fluid"><router-outlet name="mainContentOutlet"></router-outlet><!--<app-xsoccer-content></app-xsoccer-content>-->

<div id="divider" class="container-fluid"><div class="footer-divider"></div>

<div class="container-fluid"><app-xsoccer-footer></app-xsoccer-footer>

这里是我的路由表:

const appRoutes: Routes = [{ 路径:''，组件:XsoccerHeaderComponent，子组件:[{路径:''，组件:BrowserMainMenuComponent}，{路径:'home'，组件:BrowserHomeMenuComponent}]},{ 路径:''，组件:XsoccerContentComponent，插座:'mainContentOutlet'，孩子:[{路径:''，组件:WelcomeContentComponent，插座:'mainContentOutlet'}，{path: 'home', component: HomeContentComponent, outlet: 'mainContentOutlet'},]},{路径:'**'，组件:PagenotfoundComponent}];

在应用程序启动时，组件:XsoccerHeaderComponent、BrowserMainMenuComponent、XsoccerContentComponent、WelcomeContentComponent 被完美加载和呈现.

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

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

非常感谢.

解决方案

你不能在路由的顶层有 2 个空白路由，尝试换行 { path: '', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [ 类似 { path: 'content', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [.然后用 this.router.navigate(['/content/home'])

调用它

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>

And here my routing table:

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}
  ];

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

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.

Thanks a lot.

解决方案

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屋！