在嵌套路由器中显示组件 [英] Show component in nested router

问题描述

我想路由到配置"路由器，它嵌套了 2 个出口，但我无法找出正确的方法.

I want to route to "config" router, which is nested 2 outlets deep but I'm unable to figure out the correct way to do so.

<router>
  <router name="main">
    <router name="config">
    </router>
  </router>
</router>

在我的routing.ts中，我创建了两种访问组件的方法:

In my routing.ts, I created 2 ways to reach the component:

export const routes: Routes = [
  {
    // Entrypoint.
    path: 'Foo', component: FooComponent, canActivate: [IsServerOnlineGuard], children: [
        path: 'Bar', component: BarComponent, outlet: 'main', children: [
          { path: 'Smtp', component: smtpComponent, outlet: 'config' } // registered as a child
        ],
        path: 'Smtp', component: smtpComponent, outlet: 'config' }, // registered under the "main" component
      },
    ]
  },
  { path: '', pathMatch: 'full', redirectTo: 'CSI' },
  { path: '**', redirectTo: 'CSI' },
];

我尝试通过两种方式导航.

I tried navigating there in 2 ways.

public RouteToConfigOutlet(componentName: string) {
  this._router.navigate([`/(main:BarComponent)/`, {
    outlets: {
      config: ['Smtp']
    }
  }]);
}

public RouteToConfigOutlet(componentName: string) {
  this._router.navigate([``, {
    outlets: {
      main: ['BarComponent'],
      config: ['Smtp']
    }
  }]);
}

唉，我无法让我的组件显示出来，我正在努力寻找到达那里的正确方法.

Alas I'm unable to get my component to show up and am trying to find the correct way to get there.

推荐答案

我在 本网站.正确的路由方式是:

I found the answer on this website. The correct way of routing is:

router.navigate(
[{
   outlets: {
      'main': ['BarComponent',
         { outlets: { 'config': ['smtpComponent'] } } ]
   }
}]);

这篇关于在嵌套路由器中显示组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！