hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 前端开发 - 正文 君子好学,自强不息!

谈谈Angular模块的运用以及懒加载_WEB前端开发

2020-09-15前端开发搜奇网5°c
A+ A-

相干教程引荐:angularjs(视频教程)

一、Angular 内置模块

二、Angular 自定义模块

当我们项目比较小的时刻能够不必自定义模块。然则当我们项目异常巨大的时刻把一切的组 件都挂载到根模块内里不是迥殊适宜。所以这个时刻我们就能够自定义模块来构造我们的项 目。而且经由过程 Angular 自定义模块能够完成路由的懒加载。

ng g module mymodule

新建一个 user 模块

ng g module module/user

新建一个 user 模块下的根组件

ng g component module/user

新建一个 user 模块下的 address,order,profile 组件

ng g component module/user/components/address
ng g component module/user/components/order
ng g component module/user/components/profile

如安在根模块挂载 user 模块呢?

在 app 根组件的模板文件 app.component.html 里 援用 user 组件会报错
须要以下处置惩罚才能够被接见

  1. 在 app.module.ts 引入模块

  1. user 模块暴露出 要被外界接见到的组件

  2. 在根模板 app.component.html 里引入

<app-user></app-user>

假如须要在根组件里直接 运用 app-address 组件,也是须要先在 user 模块 user.module.ts 暴露

/暴露组件 让其他模块内里能够运用暴露的组件/
exports:[UserComponent,AddressComponent]

如安在根模块挂载 product 模块呢?

同上

建立 user 模块下的效劳

  1. 建立
    ng g service module/user/services/common

  2. 在 user 模块引入效劳
    user.module.ts

设置路由完成模 块懒加载

建立模块:

ng g module module/user --routing
ng g module module/article --routing
ng g module module/product --routing

建立组件:

ng g component module/user
ng g component module/user/components/profile
ng g component module/user/components/order
ng g component module/article
ng g component module/article/components/articlelist ng g component module/article/components/info
ng g component module/product
ng g component module/product/components/plist
ng g component module/product/components/pinfo

这里先以article为例解说:

angular设置懒加载

在angular中路由即能加载组件又能加载模块,而我们说的懒加载实际上就是加载模块,现在还没有看到懒加载组件的例子。
加载组件运用的是component关键字
加载模块则是运用loadChildren关键字

1. 在app文件夹下 新建 app-routing.module.ts

内容以下:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

forRoot是用在根模块加载路由设置,
而forChild是用在子模块加载路由设置。

注重:须要在根模板 app.module.ts里导入AppRoutingModule模块

import { AppRoutingModule } from './app-routing.module';
...
imports: [
    AppRoutingModule,
]

2. 在子模块里设置路由

在\module\article\article-routing.module.ts里设置路由

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

    // import {ArticleComponent} from './article.component';
    const routes: Routes = [
    // {
    //     path:'',
    //     component:ArticleComponent
    // }
    ];

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

也能够在新建项目的时刻 就把路由的模块加上,能够省去上面的 设置

在 article模块的 article-routing.module.ts设置路由

.....

import {ArticleComponent} from './article.component';
const routes: Routes = [
  {
    path:'',
    component:ArticleComponent
  }
];

......

3. 在app的路由模块举行设置路由

const routes: Routes = [
  {
    path:'article',
    //写法一:
    loadChildren:'./module/article/article.module#ArticleModule'

    //写法二
    // loadChildren: () => import('./module/user/user.module').then( m => m.UserModule)  
  },
  // {
  //   path:'user',loadChildren:'./module/user/user.module#UserModule'
  // },
  // {
  //   path:'product',loadChildren:'./module/product/product.module#ProductModule'
  // },
  {
    path:'**',redirectTo:'article'
  }
];

假如在之前新建模块的时刻没有加上–routing,,须要设置模块的路由

product模块
product的路由:module\product\product-routing.module.ts

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

import {ProductComponent} from './product.component';
const routes: Routes = [
  {
    path:'',
    component:ProductComponent
  }
];

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

product的模块:
module\product\product.module.ts

import { ProductRoutingModule } from './product-routing.module';

imports: [
    ProductRoutingModule
  ],

user模块
user的路由: \module\user\user-routing.module.ts

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

import {UserComponent} from './user.component';
const routes: Routes = [
  {
    path:'',
    component:UserComponent
  }
];

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

user的模块: \module\user\user.module.ts

import {UserRoutingModule} from './user-routing.module';  +

 imports: [
    UserRoutingModule   +
  ],

RouterModule.forRoot() 和 RouterModule.forChild()

RouterModule对象为供应了两个静态的要领:forRoot()和forChild()来设置路由信息。

RouterModule.forRoot()要领用于在主模块中定义重要的路由信息,RouterModule.forChild()与 Router.forRoot()要领相似,但它只能应用在特征模块中。

即根模块中运用forRoot(),子模块中运用forChild()。

设置子路由

  1. 在商品模块的路由product-routing.module.ts 设置子路由
import { PlistComponent } from './components/plist/plist.component';
import { CartComponent } from './components/cart/cart.component';
import { PinfoComponent } from './components/pinfo/pinfo.component';

const routes: Routes = [
  {
    path:'',
    component:ProductComponent,
    children:[
      {path:'cart',component:CartComponent},
      {path:'pcontent',component:PinfoComponent}
    ]
  },
  {path:'plist',component:PlistComponent}
];
  1. 在商品模块的模板product.component.html 增加router-outlet
<router-outlet></router-outlet>
  1. 在页面app.component.html增加菜单,轻易跳转
<a [routerLink]="['/product']">商品模块</a>
<a [routerLink]="['/product/plist']">商品列表</a>

更多编程相干学问,可接见:编程进修课程!!

以上就是谈谈Angular模块的运用以及懒加载的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
谈谈Angular模块的运用以及懒加载_WEB前端开发

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

本文来源:搜奇网

本文地址:https://www.sou7.cn/300735.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。