代码之家  ›  专栏  ›  技术社区  ›  zack evein

具有分段路由模块的子模块

  •  0
  • zack evein  · 技术社区  · 5 年前

    https://github.com/maximegris/angular-electron
    他们定义和加载模块的方式虽然路由器模块和你在互联网上看到的有点不同。


    • 为每个组件创建一个新模块,定义一个路由模块。
    • AppModule 加载所有子模块,并自动设置路由。

    应用模块ts

    @NgModule({
      declarations: [AppComponent],
      imports: [
        HomeModule,
        AppRoutingModule,
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule {}
    

    app-routing.module.ts应用程序

    const routes: Routes = [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: '**',
        component: PageNotFoundComponent
      },
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes, { useHash: true })],
      exports: [RouterModule]
    })
    export class AppRoutingModule {}
    

    HomeComponent 中未定义 routing-module .
    它在下面的子模块中定义。

    主页.module.ts

    @NgModule({
      declarations: [HomeComponent],
      imports: [HomeRoutingModule]
    })
    export class HomeModule {}
    

    home-routing.module.ts

    const routes: Routes = [
      {
        path: 'home',
        component: HomeComponent,
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class HomeRoutingModule {}
    

    一切如期进行。


    HomeModule
    我有多个视图在我的主页与子菜单。
    我试着像下面写的那样做,但是找不到页面。

    主页.module.ts

    @NgModule({
      declarations: [HomeComponent],
      imports: [NewsModule, HomeRoutingModule]
    })
    export class HomeModule {}
    

    const routes: Routes = [
      {
        path: 'home',
        component: HomeComponent,
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'news'
          },
          {
            path: '**',
            component: PageNotFoundComponent,
          },
        ]
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class HomeRoutingModule {}
    

    新闻模块.ts

    @NgModule({
      declarations: [NewsComponent],
      imports: [NewsRoutingModule]
    })
    export class NewsModule {}
    

    const routes: Routes = [
      {
        path: 'news',
        component: NewsComponent,
      }
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
    })
    export class NewsRoutingModule {}
    

    我的新闻模块html包含 <router-outlet> 应答器,所以这不是问题。我可以看到我的页面找不到。

    你知道吗?

    0 回复  |  直到 5 年前