Angular之服务(service)

发布时间:2020-06-15 01:07:55 作者:Aonaufly
来源:网络 阅读:841

一 : 新建服务

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<DATA>( $key : string , $data : DATA ) : void{
      localStorage.setItem( $key , typeof($data) === "string" ? $data : JSON.stringify($data) );
  }
  public getLocal<DATA>( $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<string> = [
      "Array",
      "[]"
    ];
    this._newService.setLocal<Array<string>>( "user" , $arr );

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

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

三 : 结果

Angular之服务(service)



推荐阅读:
  1. 如何理解Angular服务
  2. Angular Service入门

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

angular service 服务

上一篇:webloigc 打补丁

下一篇:正则表达式相关:正则表达式字符描述

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》