angular - Angular 4/5 中带有路由器 socket 的模块

Question

是否可能有不同的模块，每个模块都有独立的路由器 socket ？

我已经制作了一个入口模块来处理登录/注册。

此模块加载到主 app.module Angular CLI 构建中。

这是我的 app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    UserComponent,
    AdminComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    EntryPointModule,
    ApplicationModule,
    RoutingModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: () => {
          return localStorage.getItem('id_token');
        },
        whitelistedDomains: ['localhost:8080']
      }
    })
  ],
  providers: [AuthService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
  },
  AuthGuardService,
  RoleGuardService],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我此时在这个路由模块中的路由:

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full'},  
  { path: 'login', loadChildren: '../entry-point/entry-point.module#EntryPointModule'},  
  { path: 'application', loadChildren: '../application/application.module#ApplicationModule'},
];


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

目前，应用程序通过引导的 AppComponent 内的路由器导出重定向到登录:

这个登录组件在一个名为入口点的模块中:

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    FormsModule,
    EntryPointRouterModule,
    BrowserModule,
    BrowserAnimationsModule,
  ],
  declarations: [LoginFormComponent,
  RegisterComponent,
  ModalComponent],
  providers: [
    RegistrationService,
    ModalService
  ]
})
export class EntryPointModule { }

这些是这个模块的路由:

入口点路由器模块:

const routes: Routes = [
  { path: 'login', component: LoginFormComponent},
  { path: 'register', component: RegisterComponent},
];


@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule],
  declarations: []
})
export class EntryPointRouterModule { }

app.component.html

<router-outlet></router-outlet>

如果登录成功，它将发送到/application，并带有如上所示的 loadchildren。这是在 loginform 组件中提交登录表单时的逻辑:

  onSubmit(): void {
    this.authService.login(this.username, this.password)
      .subscribe(
      (res) => {
        this.authService.setSession(res);
        this.router.navigate(['application']);
      },
      (error) => {
        console.log(error);
        this.serverOutput = 'Wrong username/password';

      });
  }

现在它正在前往另一个模块:applicationModule，在主应用模块的路由中我设置了这条路由:

 { path: 'application', loadChildren: '../application/application.module#ApplicationModule'},
    ];

我希望我的应用程序模块有自己的路由器 socket

这是我的应用模块:

@NgModule({
  imports: [
    CommonModule,
    ApplicationRouterModule,
  ],
  declarations: [MainWindowComponent, DeleteOneComponent, DeleteTwoComponent],
  bootstrap: [MainWindowComponent]
})
export class ApplicationModule { }

我有一个 MainWindowComponent，里面有这个 html

<p>
  main-window works!
</p>
<router-outlet name="approuter"></router-outlet>

这是路线

const routes: Routes = [
  { 
    path: 'application', 
    component: MainWindowComponent,
    children: [
      { path: 'delete', component: DeleteOneComponent, outlet:'approuter'}
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule],
  declarations: [],

})
export class ApplicationRouterModule { }

我想在 MainWindowComponent 的路由器导出中加载 DeleteOneComponent。

这可能吗？

Answer 1

您需要从应用程序路由中删除“应用程序”并使用空/默认路由才能转到应用程序/删除。

否则，按照您设置的方式，您只能通过 application/application/delete 访问 DeleteOneComponent。

改变这个:

const routes: Routes = [ { path: 'application', component: MainWindowComponent, 
children: [ { path: 'delete', component: DeleteOneComponent, outlet:'approuter'} ] } ];

为此:

const routes: Routes = [ { path: ' ', component: MainWindowComponent, 
children: [ { path: 'delete', component: DeleteOneComponent, outlet:'approuter'} ] } ];