时间戳

首页 > 解决方案 > 子组件中的角路由器插座未显示任何内容

angular - 子组件中的角路由器插座未显示任何内容

问题描述

app.component.html：

<router-outlet></router-outlet>

app.routing.module.ts

{
path: 'app',
component: MainLayoutComponent,
children: [
  {
    path: 'travels',
    loadChildren: () => import('./modules/travels/travels.module').then(m => m.TravelsModule),
  },
],

},

主布局.component.html

<router-outlet></router-outlet>

MainLayoutComponent 已正确加载，因为如果我编写 "console.log("TEST") 它会在控制台中正确打印，但未加载子组件。

旅行-.module.ts

import { NgModule } from '@angular/core';

import { TravelsRoutingModule } from './travels-routing.module';
import { SharedModule } from 'src/app/shared/shared.module';

import { TravelsListComponent } from './travels-list/travels-list.component';

const SHARED_COMPONENTS = [TravelsListComponent];

@NgModule({
  declarations: [...SHARED_COMPONENTS],
  imports: [TravelsRoutingModule, SharedModule],
})
export class TravelsModule {}

travel-routing.module.ts

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

import { TravelsListComponent } from './travels-list/travels-list.component';

const routes: Routes = [
  {
    path: '',
    component: TravelsListComponent,
  },
];

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

标签： angularroutes

解决方案

值得检查的事情（对不起，如果它们很明显）：

  1. 是否在 MainLayoutComponent 中正确导入了 main-layout.component.html？
  2. 浏览器控制台中是否有任何错误可能会阻止内容正确加载？
  3. 延迟加载模块是否正在浏览器网络选项卡中下载？
  4. 如果您将子路由创建为标准路由而不是延迟加载的模块，它会起作用吗？

推荐阅读