Angular之服务(service)-创新互联

一 : 新建服务

创新互联建站一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供网站设计制作、做网站、成都网页设计、微信小程序、成都网站开发、成都网站制作、成都软件开发、成都App制作是成都本地专业的网站建设和网站设计公司，等你一起来见证！

ng g service  XXXX

二 : 注册服务

这里和组件(component)不一样需要手动注册( 在app.module.ts中 )

三 : 使用服务

① , 服务类  , 自己随便写点东西

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

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

  constructor() {}
  public setLocal( $key : string , $data : DATA ) : void{
      localStorage.setItem( $key , typeof($data) === "string" ? $data : JSON.stringify($data) );
  }
  public getLocal( $key : string ) : DATA{
     let $data : string = localStorage.getItem( $key );
     return  JSON.parse( $data ) as DATA;

  }
}

② , 在组件中调用服务

import { Component, OnInit } from '@angular/core';
import { UserVo } from 'src/app/demo/UserVo';
import {EventMessage} from "../../lib/EventMessage";
import {NewsService} from '../../services/news.service';

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

  ngOnInit() {
  }

  public  constructor( public _newService : NewsService ){
    let $arr : Array = [
      "Array",
      "[]"
    ];
    this._newService.setLocal>( "user" , $arr );

    let $a : Array  = this._newService.getLocal>( "user" );
    //console.log( $a );
  }
}

注意 , 在构造函数中Angular引起会自动注入服务...

三 : 结果

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：Angular之服务(service)-创新互联
文章起源：http://cxhlcq.com/article/icsjh.html