angular6自定義服務service

文章參考

1. angular6.x server

指令建立service

ng g service storageService

service說明

service 是一個單例，如果放在根路由下，就是在所有的元件都是共享的，因此可以利用service來傳遞和共享資料。

案例

自定義服務內容

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  public serviceName: string = "StorageService";

  constructor() {

  }

}

在NgModule中providers宣告

/**
 * 告訴angular 如何組裝應用
 */

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { HttpClientModule }   from '@angular/common/http';
import { HbModuleModule } from '../moduleHb/hb-module/hb-module.module'

import { AppComponent } from './app.component';
import { HeaderComponent } from './page/header/header.component';
import { NewsComponent } from './page/news/news.component';
import {StorageService} from './page/service/storage.service'
import { AppRoutingModule }     from './router/app-routing.module';
import { HttpdemoComponent } from './page/httpdemo/httpdemo.component';
import { StrLengthPipe } from './pipeCustomer/str-length.pipe';
import { HbFontcolorDirective } from './directiveCustomer/hb-fontcolor.directive';
import { HbBackgroundDirective } from './directiveCustomer/hb-background.directive';

//@NgModule 裝飾器將AppModule標記為Angular 模組類（也叫做 NgModule類）
// @NgModule 接收一個後設資料物件，告訴Angular 如何編譯和啟動應用
@NgModule({
  // 該模組的 declarations 陣列告訴 Angular 哪些元件屬於該模組
  // 該應用所擁有的元件——元件、管道、指令
  declarations: [
    AppComponent,
    HeaderComponent,
    NewsComponent,
    HttpdemoComponent,
    StrLengthPipe,
    HbFontcolorDirective,
    HbBackgroundDirective
  ],
  // 當前專案依賴哪些模組
  imports: [
    BrowserModule,
    HttpClientModule,
    // 如果要引入雙向繫結，則需要引入FormModule
    FormsModule,
    AppRoutingModule,
    // 自定義模組
    HbModuleModule
  ],
  // 各種服務提供商——定義服務
  providers: [
    StorageService
  ],
  // 預設啟動哪個元件——根元件
  bootstrap: [AppComponent]
})

// 根模組不需要匯出任何東西，因為其他元件不需要匯入根模組，但是一定要寫
export class AppModule { }

使用service

在元件的構造方法中直接新增引數和型別，就能夠依賴注入到當前元件中

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../service/storage.service';

@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {

  public message: string;
  public  username: any;
  public newsList = [];
  public storageService: StorageService = null;
  // public storageService: StorageService = new StorageService();

  // 構造方法中新增service型別，就是依賴注入
  constructor(storageService: StorageService) {
    this.username = "username";
    this.message = "我是訊息屬性";
    this.storageService = storageService;
    // console.dir(this.storageService);
    console.dir(storageService);

  }

  // 新增新新聞
  addData(){
    console.log("addData");
    this.newsList.push(this.username);
  }

  // 刪除資料
  delItem(index){
    alert(index);
    this.newsList.splice(index,1);
  }

  // 獲取事件
  keyAction(e){
    console.dir(e);
  }

  ngOnInit() {
  }

  updateService(){
    this.storageService.serviceName = "liumei-huanghaili";
  }

}