需要如下處理才可以被訪問

在 app.module.ts 引入模塊

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

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

<app-user></app-user>

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

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

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

同上

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

創(chuàng)建
ng g service module/user/services/common

在 user 模塊引入服務(wù)
user.module.ts

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

創(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中路由即能加載組件又能加載模塊，而我們說的懶加載實(shí)際上就是加載模塊，目前還沒有看到懶加載組件的例子。
加載組件使用的是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 { }

也可以在新建項(xiàng)目的時(shí)候 就把路由的模塊加上，可以省去上面的 配置

在 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'
  }
];

如果在之前新建模塊的時(shí)候沒有加上–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對(duì)象為提供了兩個(gè)靜態(tài)的方法:forRoot()和forChild()來配置路由信息。

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

即根模塊中使用forRoot()，子模塊中使用forChild()。

配置子路由在商品模塊的路由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}
];

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

<router-outlet></router-outlet>

在頁(yè)面app.component.html添加菜單，方便跳轉(zhuǎn)

<a [routerLink]="['/product']">商品模塊</a>
<a [routerLink]="['/product/plist']">商品列表</a>

更多編程相關(guān)知識(shí)，可訪問：編程學(xué)習(xí)課程?。?/p>

更多關(guān)于云服務(wù)器，域名注冊(cè)，虛擬主機(jī)的問題，請(qǐng)?jiān)L問三五互聯(lián)官網(wǎng)：m.shinetop.cn

贊(0)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享網(wǎng)絡(luò)內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。郵箱：3140448839@qq.com。本站原創(chuàng)內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明出處：三五互聯(lián)知識(shí)庫(kù) » 談?wù)凙ngular模塊的使用以及懶加載

登錄

找回密碼

注冊(cè)

主站蜘蛛池模板： 精品国产午夜福利在线观看| 久久天堂无码av网站| 久久久久久久久久久免费精品| 色综合天天综合天天综| 亚洲av一本二本三本| 国产成人精品区一区二区| 久久精品国产亚洲av天海翼| 办公室强奷漂亮少妇视频| 亚洲欧美人成电影在线观看| 五月丁香六月狠狠爱综合 | 亚洲第一极品精品无码久久| 久久人人爽人人爽人人av| 国产在线精品欧美日韩电影| 中文精品无码中文字幕无码专区 | 亚洲一区二区三上悠亚| 夜夜躁日日躁狠狠久久av| 亚洲AⅤ天堂AV天堂无码| 五月综合网亚洲乱妇久久| 久久精品国产亚洲av热一区| 亚洲青青草视频在线播放| 白丝乳交内射一二三区| 人妻va精品va欧美va| 黑人大荫道bbwbbb高潮潮喷| 99RE8这里有精品热视频| 亚洲av日韩在线资源| 国产精品十八禁在线观看| 大陆熟妇丰满多毛xxxⅹ| 欧美成人h精品网站| 中文字幕av无码一区二区三区| 色偷偷亚洲女人天堂观看| 水蜜桃视频在线观看免费18| 国产成人综合色视频精品| 精品无码人妻一区二区三区| 日韩一区二区三区女优丝袜| 久久久久人妻精品一区三寸| 国产日韩综合av在线| 柠檬福利第一导航在线| 视频一区二区三区刚刚碰| 精品人妻日韩中文字幕| 亚洲欧洲一区二区精品| 精品无码人妻|