带有路由器插座的模块，采用Angular 4/5-Java 学习之路

可以有不同的模块，每个模块都有独立的路由器插座吗？

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

该模块加载在主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 { }

目前，该应用程序重定向到通过bootstraped AppComponent内部的路由器插座登录：

此登录组件位于名为入口点的模块内：

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

这些是该模块的路线：

EntryPointRouterModule：

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

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

这是我的applicationModule：

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

我有一个带有这个html的MainWindowComponent

<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的router-outlet内加载DeleteOneComponent .

那可能吗？

2 回答

您需要从应用程序路由中删除“应用程序”并使用空/默认路由才能进入应用程序/删除 .

否则，按照设置方式，您只能通过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'} ] } ];

回复于 2024-04-29T07:27:31+08:00

0

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

回复于 2024-04-29T07:27:31+08:00

带有路由器插座的模块，采用Angular 4/5

2 回答

相关问题