急切的模块加载会导致部分模板消失

Question

我有一个急切加载模块（

app-routing.module.ts

托管

HomeComponent

）和一个延迟加载模块（

my-routing.module.ts

）。我的问题是，当我按下

Experiment

上的

test.component.html

按钮时，带有该按钮的整行都会消失。

我的

app-routing.module.ts

看起来像这样：

const myModule = () => import('./my-routing/my-routing.module').then(x => x.MyRoutingModule);
const routes: Routes = [
  { path: '', component: TestComponent },
  { path: 'experiment', /* component: ListComponent, outlet: "outlet1" */loadChildren: myModule },
  {
    path: 'home',
    component: HomeComponent, outlet: "outlet1"
  },
];

我的

my-routing.module.ts

看起来像这样：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from '../list.component';
import { TestComponent } from '../test/test.component';

const routes: Routes = [

  
  { path: 'test', component: ListComponent, outlet: "outlet2" },

];

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

我的

app.component.html

看起来像这样：

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <nav>

</nav>
  <router-outlet></router-outlet>
  <div >
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-dark">Dark</button>

    <button type="button" class="btn btn-link">Link</button>
  </div>
</div>
<router-outlet name="outlet1"></router-outlet>
<router-outlet name="outlet2"></router-outlet>

最后我的

test.component.html

看起来像这样：

<div class="container">
  <div class="row">
    <div class="col-2">
      <a [routerLink]="[{ outlets:{ outlet1: ['home'] }}]" routerLinkActive="active"><button type="button" class="btn btn-primary">
          Home</button></a>
    </div>
    <div class="col-1">
      <a [routerLink]="['experiment', { outlets:{ outlet2: ['test'] }}]"><button type="button" class="btn btn-primary">
          Experiment</button></a>
    </div>

  </div>
</div>

Answer 1

您应该在 app-routing-module.ts 中包含 my-routing-module.ts 的路径，而不是直接包含测试组件的路径

const routes: Routes = [
  { 
    path: '', 
    component: AppComponent,
    loadChildren: () => import('@modules/my-routing.module').then((m) => 
     m.ItemsModule),
  },
 ];

您也可以使用布局组件来包含路由器插座。

您应该考虑使用如下所示的文件夹结构。

[![enter image description here][1]][1]

所有延迟加载的模块都可以包含在“modules”文件夹中。