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

一 : 新建服务

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

ng g service  XXXX

Angular之服务(service)

二 : 注册服务

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

Angular之服务(service)

三 : 使用服务

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

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引起会自动注入服务...

三 : 结果

Angular之服务(service)

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


文章标题:Angular之服务(service)-创新互联
URL网址:http://myzitong.com/article/icsjh.html