使用子路由处理Angular 2路由器通配符

3 回答

• 30

  您可以轻松拥有集中的通配符路由，即站点范围的'Page not found'组件 . 它只需要被提取到 separate routing module 中，其中包含包含子路径的 after all the other modules .

  因此，通配符路由确实位于最后位置，并且不会隐藏来自任何后续模块的路由 .

  通配符路由模块或“找不到页面”路由模块：

  @NgModule({
      imports: [
          RouterModule.forChild([
              {
                  path: '**',
                  component: NotFoundComponent
              }
          ])
      ],
      declarations: [
          NotFoundComponent
      ],
      exports: [
          RouterModule
      ]
  })
  export class WildcardRoutingModule { }
  

  应用程序模块：

  @NgModule({
      imports: [
          BrowserModule,
  
          AppRoutingModule, // Has forRoot routes 
  
          HomeModule, // Has forChild routes 
          LoginModule, // Has forChild routes
          ProductModule, // Has forChild routes
          DiagnosticsModule, // Has forChild routes
  
          WildcardRoutingModule // Last position
      ],
      declarations: [
          AppComponent  
      ],
      providers: [
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  

  回复于 2024-04-29T07:33:45+08:00
• 0

  简单的解决方案是在app模块文件中重新排序'imports'数组中的模块 - 确保app / root路由器是数组中的最后一项;例如

  @NgModule({
    imports: [FeatureModule1, FeatureModule2, FeatureModule3, AppRouterModule]
    ...
    ...
  })
  

  回复于 2024-04-29T07:33:45+08:00
• 12

  我有以下示例给你 . / -route重定向到 /app -route并在您的父级 AppComponent 的 <router-outlet> 内显示 StartComponent . StartComponent 本身在其模板中有另一个 <router-outlet> ，路由器在其中加载子组件 .

  const appRoutes: Routes = [
      {
          path: '',
          redirectTo: 'app',
          pathMatch: 'full',
      },
      {
          path: 'app',
          component: StartComponent,
          children: [
              {
                  path: '',
                  redirectTo: 'welcome'
              },
              {
                  path: 'welcome',
                  component: WelcomeComponent
              },
              {
                  path: 'settings',
                  component: SettingsComponent
              },            
          ]
      },
      {
          path: '**',
          component: PageNotFoundComponent 
      }    
  ];
  

  最后一个路由是带有 ** -path的通配符路由 . 如果您导航到不知道的URL（如 /test123 ）或子组件 /app/test123 ，将显示此信息 .

  pathMatch: 'full' 表示路由器正在寻找相同的路由 . 这对重定向非常重要 .

  如果你的孩子也需要一个 PageNotFound -Component，你也可以为它们添加一个野猫 .

  {
      path: 'app',
      component: StartComponent,
      children: [
          {
              path: '',
              redirectTo: 'welcome'
          },
          {
              path: 'welcome',
              component: WelcomeComponent
          },    
          {
              path: '**',
              component: ChildrenPageNotFoundComponent
          },      
      ]
  }
  

  回复于 2024-04-29T07:33:45+08:00