首页 文章

将具有空路径的路径的子路径加载到指定的插座中

提问于
浏览 次
1

我有一个空路径的路由，作为我的应用程序中所有其他组件的保护 . 它的子代是应该保护未经过身份验证的用户的组件 .

其中一条路线激活模式对话框，我想在辅助路由器插座而不是默认插座中加载 .

在给定以下路由配置的情况下，URL将 home 路由加载到默认路由器出口和 mydialog 路由到指定的 popup 路由器出口是什么？

const routes: Route[] = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: '',
    canActivate: [AuthenticatedGuard],
    component: WrapperComponent,
    children: [
      {
        path: 'home',
        component: HomeComponent,
      },
      {
        path: 'mydialog',
        outlet: 'popup',
        component: GigSelectionModalComponent
      }
    ]
  }
];

我尝试但没有奏效的事情：

  • /#/home(popup:mydialog) -> Error: Cannot match any routes. URL Segment: 'mydialog'

  • /#/home(popup:/mydialog) -> Error: Cannot match any routes. URL Segment: 'mydialog'

  • /#/home/(popup:mydialog) -> Error: Cannot match any routes. URL Segment: 'home'

  • /#/home/(popup:/mydialog) -> Error: Cannot match any routes. URL Segment: 'home'

  • /#/(home//popup:mydialog) -> Error: Cannot match any routes. URL Segment: 'home'

  • /#(/home//popup:mydialog) -> Error: Cannot match any routes. URL Segment: 'home'

Angular 4.1.3

PS

如果我将非空路径 app 分配给包装器路由，那么我可以通过以下URL成功导航： /#/app/(home//popup:mydialog) .

但是，我坚持使用包装器的空路径 .

angular url-routing

1 回答

  • -1

    您可以通过 lazyLoading 以角度来实现此目的 .

    LazyLoading参考：https://angular.io/guide/lazy-loading-ngmodules

    const routes: Routes = [

  {
    path: 'login',
    component: LoginComponent,
    pathMatch: 'prefix'
  },
  {
    path: '',
    loadChildren: './dashboard/dashboard.module#DashboardModule'
  },
  {
    path: 'lazy1',
    loadChildren: './lazy1/lazy1.module#Lazy1Module'
  },
  {
    path: 'lazy2',
    loadChildren: './lazy2/lazy2.module#Lazy2Module'
  }
];
    回复于

相关问题