真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Angular中模塊和懶加載的示例分析

這篇文章主要介紹Angular中模塊和懶加載的示例分析,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!

創(chuàng)新互聯(lián)公司自2013年起,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項目成都網(wǎng)站建設(shè)、成都做網(wǎng)站網(wǎng)站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元連江做網(wǎng)站,已為上家服務(wù),為連江各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

一、Angular 內(nèi)置模塊

Angular中模塊和懶加載的示例分析

二、Angular 自定義模塊

當(dāng)我們項目比較小的時候可以不用自定義模塊。但是當(dāng)我們項目非常龐大的時候把所有的組 件都掛載到根模塊里面不是特別合適。所以這個時候我們就可以自定義模塊來組織我們的項 目。并且通過 Angular 自定義模塊可以實現(xiàn)路由的懶加載。

ng g module mymodule

Angular中模塊和懶加載的示例分析

新建一個 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 引入模塊

Angular中模塊和懶加載的示例分析

2、user 模塊暴露出 要被外界訪問到的組件

Angular中模塊和懶加載的示例分析

3、在根模板 app.component.html 里引入

如果需要在根組件里直接 使用 app-address 組件,也是需要先在 user 模塊 user.module.ts 暴露

/暴露組件 讓其他模塊里面可以使用暴露的組件/
exports:[UserComponent,AddressComponent]

如何在根模塊掛載 product 模塊呢?

同上

創(chuàng)建 user 模塊下的服務(wù)

1、創(chuàng)建

ng g service module/user/services/common

2、在 user 模塊引入服務(wù)

user.module.ts

Angular中模塊和懶加載的示例分析

配置路由實現(xiàn)模 塊懶加載

Angular中模塊和懶加載的示例分析

創(chuàng)建模塊:

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

創(chuàng)建組件:

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關(guān)鍵字
加載模塊則是使用loadChildren關(guān)鍵字

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

內(nèi)容如下:

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里導(dǎo)入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的路由模塊進(jìn)行配置路由

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對象為提供了兩個靜態(tài)的方法:forRoot()和forChild()來配置路由信息。

RouterModule.forRoot()方法用于在主模塊中定義主要的路由信息,RouterModule.forChild()與 Router.forRoot()方法類似,但它只能應(yīng)用在特性模塊中。

即根模塊中使用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}
];

2、在商品模塊的模板product.component.html 添加router-outlet

3、在頁面app.component.html添加菜單,方便跳轉(zhuǎn)

商品模塊商品列表

以上是“Angular中模塊和懶加載的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


分享文章:Angular中模塊和懶加載的示例分析
轉(zhuǎn)載來于:http://weahome.cn/article/ppojge.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部