Angular 4 按钮 link 延迟加载模块路由不起作用

Question

我有一个带有延迟加载模块的 routerLink 指令的按钮。但是 link 不起作用。当它在浏览器地址栏中加载时（单击按钮时），该组件永远不会加载，并且在控制台中出现 404 错误。我究竟做错了什么。

我想要实现的功能是：当我去 /incidents/5 获取填写的表格（来自 editing/updating 的 id = 5 的事件）而当我去 /incidents/new 获取空表格以插入新事件。

我想问题可能出在 IncidentsRoutingModule 中，但是我无法工作。

我的主要应用程序路由模块如下：

const appRoutes: Routes = [
  { path: '', redirectTo:'home', pathMatch:'full'},
  { path: 'home', component: HomeComponent },
  { path: 'incidents', loadChildren : 'app/incidents/incidents.module#IncidentsModule' },
  { path: 'patients', loadChildren: 'app/patients/patients.module#PatientsModule' },
  { path: 'doctors', loadChildren: 'app/doctors/doctors.module#DoctorsModule' },
  { path: 'clinics', loadChildren: 'app/clinics/clinics.module#ClinicsModule' },
  { path: 'search', component: SearchComponent },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules } )
  ],
  exports: [RouterModule]
})

export class AppRoutingModule {}

IncidentsModule 是：

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IncidentsRoutingModule
  ],
  declarations: [
    IncidentsComponent,
    IncidentDetailsComponent,
    IncidentsListComponent
  ],
  providers:[IncidentsService]
})
export class IncidentsModule { }

IncidentsRoutingModule 是：

const incidentsModuleRoutes: Routes = [
  {
    path: '',
    component: IncidentsComponent,
    children: [
      {
        path: '', component: IncidentsListComponent,
        children: [
          {
            path:':id', component: IncidentDetailsComponent
          },

          {
            path: 'new', component: IncidentDetailsComponent
          }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(incidentsModuleRoutes)
  ],
  exports: [RouterModule]
})
export class IncidentsRoutingModule { }

我的 IncidentsComponent 有一个带有 routerLink 指令的按钮，该指令不起作用。下面是我的事件组件：

@Component({
  // selector: 'app-incidents',
  template: `
    <div class="container-fluid">
      <h3 style="margin:20px 20px 0px 20px;">Περιστατικά</h3>
      <button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="/incidents/new">
        <i class="fa fa-plus-circle" style="margin-right: 10px"></i>
        Νέο Περιστατικό
      </button>
      <router-outlet></router-outlet>
    </div>
  `,
  styleUrls: ['./incidents.component.css']
})
export class IncidentsComponent {

  constructor() {
  }

}

Answer 1

改为

<button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="new">
        <i class="fa fa-plus-circle" style="margin-right: 10px"></i>
        Νέο Περιστατικό
      </button>

您可以尝试在主路由模块的 forRoot 方法中添加 useHash: true

Answer 2

正如我在 IncidentsRoutingModule 中所怀疑的那样。我将其更改为以下内容并且按预期工作。

const incidentsModuleRoutes: Routes = [
  {
    path: '',
    component: IncidentsComponent,
    children: [
      {
        path: '', component: IncidentsListComponent,
      },
      {
        path:':id', component: IncidentDetailsComponent
      },
      {
        path: 'new', component: IncidentDetailsComponent
      }
    ]
  }
];

显然我所理解的（不知道这是否正确，还没有找到或在某处阅读过）是延迟加载模块中的 children 指的是 <router-outlet></router-outlet>宣言.

在我的情况下，我只有一个 <router-outlet> 在 IncidentsComponent 内。因此，所有路径都必须位于 IncidentsComponent 下的 children object 中。在其他 child 组件下添加 children objects 我想只有当这些组件也有 <router-outlet> 声明时才有效？我说的对吗？？？？

Angular 4 按钮 link 延迟加载模块路由不起作用

Angular 4 button link to LazyLoading Module Route Not Working

lazy-loading

angular

angular-router