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中的第一个告诉角度何时加载模块。懒惰功能模块中的第二个组件告诉角度何时显示特定组件。

根据您的情况，将appModule路由的路径更改为hello。当看到hello URL时，这告诉Angular下载惰性模块。从第二种配置开始，将其保留为空。这表明在看到hello网址后面的空字符串

时要加载组件的角度

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。

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

2 个答案: