ng 配置@ngModule({ imports: [ BrowserModule ], //導入模塊 declarations: [ AppComponent ], //導入組件 providers: [ ] //導入服務(service) }) 在app主模塊下 app.module 引入大模塊 ...
ng 配置
@ngModule({
imports: [ BrowserModule ], //導入模塊
declarations: [ AppComponent ], //導入組件
providers: [ ] //導入服務(service)
})
在app主模塊下
app.module 引入大模塊的集合
====》
import {SmartadminLayoutModule} from "./shared/layout/layout.module";
app.routing 引入/定義 根路由
定義一個product的模塊
(product模塊下的組件所依賴的輔助模塊,需要在導入到product.module)
1.創建product模塊和路由
ng g module +product/product --routing --flat
2.在+product下創建組件, 如:category
ng g component +product/+category/category --flat
product.module會自動引入該組件
3.路由跳轉 product-routing
一 引入category組件
二 定義category路由
{
path: 'category',
component: 'CategoryComponent',
data: { pageTitle: '分類' } //傳入數據
}
4.組件的用法 category
一 調用API數據
先創建一個product.service
在裡面定義一個獲取API數據的方法
getCategories(): Observable<any> {
return this.http.JsonApi('/product/category.json');
};
在product.module中引入該服務
import { ProductService } from './product.service';
provides: [ ProductService ] //依賴註入
在category.component.ts中引入該服務
import { ProductService } from './product.service';
實例化該服務
constructor(
private productService: ProductService
){ }
ajax調用, 獲取數據
this.productService.getCategories()