动态加载的模块使角度` `显示两次

Question

解决方案在Angular <router-outlet> displays template twice中的某个位置，但由于动态加载的模块，我的示例有所不同，因此我无法应用它。

我有一个嵌套的<router-outlet>设置；

• [<router-outlet>渲染顶级组件localhost:4200/login中的LoginComponent
• AppComponent渲染顶级组件localhost:4200/main中的MainComponent
  • [AppComponent包含其中呈现了MainComponent的<router-outlet>。

应用结构：

LeafComponent

以下内容取自

app.component.ts       <router-outlet>
components/
    login/
        login-component.ts
    main/
        main-module.ts
        main-component.ts       <router-outlet>
        components/
            leaf-component.ts

，且工作iff app.module是动态加载的[。即仅在实例化main-module时有效。

main-component

这有效。但是当动态加载const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['/login']);
const redirectLoggedInToMain = () => redirectLoggedInTo(['/main']);

const appRoutes: Routes = [
  {
    path: 'login',
    pathMatch: 'full',
    component: LoginComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectLoggedInToMain },
  },
  {
    path: '',
    component: MainComponent,
    canActivate: [AngularFireAuthGuard],
    data: { authGuardPipe: redirectUnauthorizedToLogin },
    children: [

      { path: '', redirectTo: '/main', pathMatch: 'full' },
      // ----> Render leaf-component in main-component <router-outlet>
      {
        path: 'main',
        pathMatch: 'full',
        component: LeafComponent,
      },

    ],
  },
  { path: '**', component: PageNotFoundComponent },
];
时，LeafModule会渲染两次。即动态加载MainComponent并实例化
then main-module时，它不起作用。
main-component

Answer 1