Angular 4/5 中带路由器插座的模块

Question

是否可以有不同的模块，每个模块都有单独的路由器插座？

我制作了一个入口模块来照顾login/register。

此模块加载到主 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，在主appmodule的路由中我设置了这个路由：

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

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

这是我的应用模块：

@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' 并使用 empty/default 路由才能转到 application/delete。

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

改变这个：

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'} ] } ];

Answer 2

我命名了内部出口，但没有必要。只需使用 <router-outlet>.

Angular 4/5 中带路由器插座的模块

Modules with router-outlet in Angular 4/5

angular-routing

angular

angular5