在一個組件中 分為 mvc結(jié)構(gòu)
m(model)--就是model 就是組件中可能使用到的實體類。
v(view)--就是component中的html肯夏。
c(controller)--就是ts文件中的數(shù)據(jù)處理。
在編寫過程中犀暑，可能存在很多相同的數(shù)據(jù)處理方式熄捍。
比如：
可能很多component里面的console.log都需要格式化輸出。
可能很多component里面的都要獲取產(chǎn)品的詳情母怜。
這時候可以把這些通用的方法放到一個service中余耽。并將service注入到c中,這樣，就可以減少重復代碼苹熏，提高代碼的可維護性碟贾。
angular中生成一個service可以使用angular-cli命令
ng g service （share/) xxxx
(share/)的意思是把service生成的路徑放到share文件夾下面 可以讓路徑更加清晰
使用
ng g service share/product
會自動生成service所需的兩個文件
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ProductService {
constructor() { }
getProduct(): Product{
return new Product(0,"iphone7",5899,"iphone7desc")
}
}
export class Product {
constructor(
public id: number,
public title: string,
public price: number,
public desc: string
){
}
}
編寫號servie中的代碼后把service放到模塊的提供器中。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { Product1Component } from './product1/product1.component';
import {ProductService} from "./shard/product.service";
import { Product2Component } from './product2/product2.component';
@NgModule({
declarations: [
AppComponent,
Product1Component,
Product2Component
],
imports: [
BrowserModule
],
providers: [ProductService],
bootstrap: [AppComponent]
})
export class AppModule { }
這樣就可以在模塊的所有的component里面使用找個service了
import { Component, OnInit } from '@angular/core';
import {Product, ProductService} from "../shard/product.service";
@Component({
selector: 'app-product1',
templateUrl: './product1.component.html',
styleUrls: ['./product1.component.css']
})
export class Product1Component implements OnInit {
product: Product;
constructor(private prouductService:ProductService) { }
ngOnInit() {
this.product = this.prouductService.getProduct();
}
}
ProductService使用了@Injectable聲明轨域。所以可以直接在需要他的類的構(gòu)造方法中注入使用袱耽。
