Angular 8 在页眉和页脚之间路由组件未在控制台上正确显示

Question

我在 angular 路由方面遇到问题。

在 app.component.html 我们有：

<router-outlet></router-outlet>

而 app-routing.module.ts 就像：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  { path: '', loadChildren: './layout/layout.module#LayoutModule' },
  { path: 'home', loadChildren: './layout/layout.module#LayoutModule'},
  { path: '**', redirectTo: 'home', pathMatch: 'full'}
];

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

在 app.module.ts 我导入了 LayoutModule。

现在在布局模块中，我们有 2 个组件 <footer> 和 <header> 显示在 layout.component.html:

<div id="theme_id">
    <app-header></app-header>
    <app-footer></app-footer>
</div>

我需要将它们之间的 router outlet 显示如下：

<div id="theme_id">
    <app-header></app-header>
    <router-outlet></router-outlet>
    <app-footer></app-footer>
</div>

所以在 layout-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LayoutComponent } from './layout.component';


const routes: Routes = [
  { path: '', component: LayoutComponent },
  { path: 'query', loadChildren: './query-offers/query-offers.module#QueryOffersModule' }
];

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

所以当用户点击进入查询组件时，我需要它显示在页眉和页脚之间。

问题是 query 组件单独显示如下：

上图显示路由不正常

Answer 1

你提供的代码中的错误以及你在问题中的解释

无需在两者中包含 <router-outlet></router-outlet> app.component.html 和 layout-component.html
不需要在 AppModule 中导入 LayoutModule 因为你很懒加载
HeaderComponent和FooterComponent在整个项目所以只添加 app.component.html 就足够了
你还需要 QueryOffersModule 才能成为 lazy-loading 那你为什么需要在 LayOutModule 中将其作为 children 提供。而不是那个您可以在 AppRoutingModule

因此您的 AppRoutingModule 将如下所示

<!-- AppRoutingModule -->
const routes:Routes =[{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'home'
  },{
    path: 'home',
    loadChildren: () =>
      import('./layout/layout.module').then(
        m => m.LayoutModule
      )
  },{
    path: 'query',
    loadChildren: () =>
      import('./query-offers/query-offers.module').then(
        m => m.QueryOffersModule
      )
  }]

以下是你的app.component.html

<!-- app.componet.html -->
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

我假设 layout.component.html 或任何地方都会有 query 按钮。单击那条通往 query 的路线，其中有 QueryOffersModule.

Angular 8 在页眉和页脚之间路由组件未在控制台上正确显示

Angular 8 Routing a component between header and footer is not shown with no errors at the console

lazy-loading

angular-routing

angular

angular8