Angular6无法在延迟加载的模块上导航

时间:2018-07-04 08:54:20

标签: angular angular2-routing

这是我的回家路线

const homeRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: 'dummy',
        loadChildren: '../dummy/dummy.module#DummyModule'
      }
    ]
  }
];

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

这是我要加载的组件路线

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

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

但是它不会加载我的组件。只有网址在更改

enter image description here

知道发生了什么吗?这是我的文件夹结构

enter image description here

enter image description here

App.component.html

<div class="row">
  <div class="col-12">
    <router-outlet></router-outlet>
  </div>
</div>

dummy.module.ts

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

import { DummyRoutingModule } from './dummy-routing.module';
import { DummyComponent } from './dummy/dummy.component';

@NgModule({
  imports: [
    CommonModule,
    DummyRoutingModule
  ],
  declarations: [DummyComponent]
})
export class DummyModule { }

1 个答案:

答案 0 :(得分:0)

更新一件事,让我们尝试一次。让我知道

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

import { DummyRoutingModule } from './dummy-routing.module';
import { DummyComponent } from './dummy/dummy.component';

@NgModule({
  imports: [
    CommonModule,
    DummyRoutingModule
  ],
  declarations: [DummyComponent],
  exports:[DummyComponent] //added this line newly
})
export class DummyModule { }

确保已在虚拟component.html文件中输入了一些数据

也更改

@NgModule({
  imports: [RouterModule.forRoot(homeRoutes)], //forChild to forRoot
  exports: [RouterModule]
})
export class HomeRoutingModule { }

@cetia说了这个。