實現添加商品頁面，而且構建路由

目標：實現添加商品頁面，而且構建路由

 

1. 建立幾個component：（商戶版）

product-list（商品列表）

product-create（建立商品）

product-edit（編輯商品）

product-detail（商品詳情）

 

ng g c ProductList --spec=false

 

2. product-create（添加商品）的構建

 

. 構建它的template

 

 

 

. 構建它的class

 

. 兩者關聯，表單驗證

 

 

3. 獲取數據庫服務器的數據，並顯示在組件上

 

. 調用建立商品的service

ng g service product

 

. 對它的返回對象（Observable）進行訂閱（subscribe）

 

. 顯示到組件上

 

 

#知識點：

[disabled]="myForm.invalid" 與[disabled]="!myForm.valid"是等效的

 

#構建商品管理路由

1. 建立路由module

 

ng g module app --routing

 

構建多個component怎麼辦？

xx.modules.ts

xx-routing.module.ts

component1

……

componentN

 

建立了一個app-routing.module.ts,構建它

app-routing.module.ts,把forChild改成forRoot

 

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

 

把app-routing.module.ts導入到app.module.ts 中

 

 

2. 建立routes

只有加了<router-outlet>後，前面的路由所對應的component才能呈現出來。加在app.component.html中

 

 

 

3. 在組件中添加routerLink

 

 

 

 

[小結]

調用了CRUD的Restful API，

清楚了subscribe的異步回調，

增長了app-routing.module

 

[下一步]

修改，技術點：在於路由時傳值（傳參）