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

是否可能有不同的模块，每个模块都有单独的路由器出口

我制作了一个登录/注册的输入模块

此模块加载在主app.module 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>

现在转到另一个模块：applicationModule，在主appmodule的路由中，我设置了以下路由：

 { path: 'application', loadChildren: '../application/application.module#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>

我想在MainWindowComponent的路由器出口内加载DeleteOneComponent

---

这可能吗？

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

否则，按照设置方式，只能按应用程序/应用程序/删除访问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'} ] } ];

---

我命名了内部插座，但它不是必需的。只需使用

是的，就是这样。有什么问题吗？你看到错误了吗？嘿，德克斯特，谢谢你的关注，希望你能帮点忙；）当我转到“应用程序/删除”时，没有显示任何内容，我在浏览器控制台中收到以下错误：错误：未捕获（承诺中）：错误：无法匹配任何路由。URL段：“应用程序/删除”不起作用。。。现在，如果我去它显示一个没有主窗口的空页面

如果我转到application/delete，它会显示与以前相同的错误。我能看到的代码与我的工作代码之间的唯一区别是applicationModule中的引导绑定。尝试删除它。我相信代码来自Angular 2 r.c.EDIT*我删除了它，然后如果我转到应用程序，而不是我在根路由器中声明的/login，如果我转到，我会得到与以前相同的错误。。。编辑：如果我删除outlet:'approuter'它显示了主应用程序RouterEnd上的deletecomponent，我修复了它，问题是命名内部路由器oulet。

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