账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Angularjs2中根模块导入特性模块,如何将特性模块的路由作为根模块路由的子路由导入?
    11
    0

    最近在开发时遇到的问题,根模块在导入子模块时,子模块路由会扩展根模块路由。
    但是根模块路由和子模块路由是平级关系。

    以下是根模块路由

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes }  from '@angular/router';
    import { AuthGuard } from './common/auth/auth.service';
    
    // 根路由器
    const manage_routes: Routes = [
        { 
            path: 'manage',
            children: [
                { path: '',  redirectTo: 'dashboard_conf', pathMatch: 'full' },
                ...
            ]
        }
    ];
    
    @NgModule({
        imports: [ RouterModule.forChild(manage_routes) ],
        exports: [ RouterModule ]
    })
    export class ManageRoutingModule {}

    以下是特性模块路由

    import { NgModule } from '@angular/core';
    import { RouterModule, Routes }  from '@angular/router';
    
    import { ImageUploadComponent } from './upload_image.component';
    import { ImageConfComponent } from './image.component';
    import { ImageSeriesConfComponent, ImageSeriesConfDetailComponent, ImageSeriesSetComponent } from './image_series.component';
    import { ImageTagConfComponent, ImageTagConfDetailComponent, ImageTagSetComponent } from './image_tag.component';
    import { ImageSeriesCategoryConfComponent, ImageSeriesCategoryConfDetailComponent, ImageSeriesCategoryConfSetDetailComponent} from './image_series_category.component';
    import { ImageRecommendTagConfComponent, ImageRecommendTagConfDetailComponent } from './image_recommend_tag.component';
    
    // 图片模块路由器
    const image_routes: Routes = [
        { path: 'manage/image_upload', component: ImageUploadComponent },
        { path: 'manage/image_conf', component: ImageConfComponent },
        
        { 
            path: 'manage/image_series_conf', 
            children: [
                { path: '', component: ImageSeriesConfComponent },
                { path: 'detail/:id', component: ImageSeriesConfDetailComponent },
                { path: 'detail/add', component: ImageSeriesConfDetailComponent },
                { path: 'set/:id', component: ImageSeriesSetComponent },
            ]
        },
        
        ...
    ];
    
    @NgModule({
        imports: [ RouterModule.forChild(image_routes) ],
        exports: [ RouterModule ]
    })
    export class ImageRoutingModule {}

    根模块导入特性模块

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouterModule } from '@angular/router';
    ...
    import { ImageModule } from './image/image.module';
    
    @NgModule({
        declarations: [
            DashboardConfComponent,
        ],
        imports: [
            ...
            ImageModule, // 图片模块
            ManageRoutingModule, // 放在最后
        ],
        providers: [
            ...
        ]
    })
    export class ManageModule {
    }
    

    最后得到的路由列表

    Routes:  [
      {
        "path": "manage/image_series_conf",
        "children": [
          {
            "path": ""
          },
          {
            "path": "detail/:id"
          },
          {
            "path": "detail/add"
          },
          {
            "path": "set/:id"
          }
        ]
      },
      {
        "path": "",
        "redirectTo": "manage",
        "pathMatch": "full"
      }
    ]

    这两个路由列表合成之后,依然是平级关系,怎么能让特性模块作为根模块的子路由呢?难道只能把所有路由都写在一块吗?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 深深爱过你 普通会员 1楼

      在AngularJS2中,我们可以通过import语句来导入一个模块。如果你想将一个模块的路由作为根模块路由的子路由导入,你可以这样做:

      ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component';

      const routes: Routes = [ { path: 'home', component: HomeComponent } ];

      @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ```

      在这个例子中,我们首先导入了RouterModuleRoutes。然后,我们定义了一个数组routes,这个数组包含了我们要导入的路由。最后,我们使用import语句来导入这个数组中的所有路由。

      注意,这里我们使用了path属性来指定路由的名称。在AngularJS2中,路由的名称是路径中的路径名,而不是URL中的路径名。

      此外,如果你想将一个模块的路由作为其他模块的子路由导入,你可以在导入该模块时使用RouterModule.forChild方法。例如:

      ```typescript import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component';

      const routes: Routes = [ { path: 'home', component: HomeComponent } ];

      @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ```

      在这个例子中,我们没有导入任何模块,而是直接使用RouterModule.forChild方法来导入routes数组中的所有路由。

    更多回答
    扫一扫访问手机版