带有延迟加载模块和子路由的Angular 7路由器'**'通配符不起作用？

Question

我正在尝试使用来自 Angular 路由器的通配符“**”创建默认路由。该默认路由将加载一个惰性模块，然后它必须解决自己的路由。问题是当我有以下配置时，它没有按预期解决：

export const routes = [
  {
    path: '',
    component: 'DashboardComponent'
  },
  {
    path: '**',
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [AppComponent]
  bootstrap: [AppComponent]
})
export class AppModule {}

---

const routes = [
  {
    path: '', 
    component: MainComponent
  }
  {
    path: 'hello',  // hoping to pick up the wildcard and resolve the route
    component: HelloComponent
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    AnyComponent,
    EditComponent
  ]
})
export default class LazyModule {}

例如。对于 mydomain.com/hello，它不会向我显示 HelloComponent，而是向我显示 MainComponent。

我的配置有问题还是不应该这样工作？

提前致谢。

Answer 1

惰性模块需要两个路由配置。 appModule 中的第一个告诉角度何时加载模块。第二个在惰性特性模块中，告诉 Angular 何时显示特定组件。

在您的情况下，将 appModule 路由的路径更改为 hello。这告诉 Angular 在看到 hello url 时下载惰性模块。 从第二个配置开始，将其留空。这告诉 Angular 在看到hello url 后面的空字符串时加载组件

AppModule

export const routes = [
  {
    path: '',
    component: 'DashboardComponent'
  },
  {
    path: 'helllo', <-- change this
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

LazyModule

const routes = [
  {
    path: '', 
    component: LazyComponent // I do not know what this is. The components are not lazy. Modules are
  }
  {
    path: '',  <-- change this
    component: HelloComponent
  }
];

我在您的代码中看到您有一个 LazyComponent。我不知道你想用这个实现什么，但组件并不懒惰。模块是。

Answer 2

我相信您必须重定向到实际路线。有一些与此相关的主题，here is one。同样根据Angular's examples，您可能必须从 LazyModule 导出您的 RouterModule。