试图了解loadChildren

时间:2018-09-18 07:31:37

标签: angular angular-ui-router

我正在浏览https://angular.io/api/router/Routes页上的文档,在那里找到了关键字“ loadChildren”。

我发现很难理解它。

非常感谢您的帮助!

1 个答案:

答案 0 :(得分:2)

在角度上,我们有一个延迟加载概念

一般来说::我们将在根模块(即app.module.ts)中导入并声明该组件,并在根路由文件中设置路径,如下所述:

  const routes: Routes = [
    { path: "", component: AboutComponent},];

此处,应用模块中加载的所有组件都将在其自身进行初始加载时下载到浏览器中,这会影响性能和初始加载时间

延迟加载::我们只会在路由文件中加载子模块的子模块,因此仅在路径请求时才会加载模块中存在的组件。

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "about",
    loadChildren: "../app/about/about.module#AboutModule"
  },
  {
    path: "service",
    loadChildren: "../app/service/service.module#ServiceModule"
  }
]; 

在上面的代码中,仅当用户在浏览器中加载路径 about 时,才会下载about组件。