Angular 服务的创建及使用

在网页开发中，我们在必要时需要在多个组件之间进行通用数据。就好比vuex、Redux、Dva一样，那么在Angular中，它也有自己的独特的数据状态管理，那就是服务 service ！

服务的创建：
你可以在项目根目录通过命令创建服务ng g service services/user，前面这一串我们就使得我们在app目录下创建了一个services文件夹，在此文件夹下有个user服务；
user.service.ts

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class UserService {public userInfo: object = {name: "Mr.Nie",age: 22,gender: 1,province: "广东"}constructor() { }getUserInfo() {//数据的请求}
}

当然你可以根据你的项目需要，创建多个不同的服务。

这些服务里的数据、方法可以在任何组件中进行使用，当然必要时服务与服务之间的数据也是可以互通的！

服务的使用：
创建好服务之后，来到app.module.ts文件中，引入创建好的服务并在providers中引用：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';//引入服务
import { UserService } from "./services/user.service";@NgModule({declarations: [AppComponent,HomeComponent],imports: [BrowserModule,AppRoutingModule,FormsModule],//使用服务providers: [UserService ],bootstrap: [AppComponent]
})
export class AppModule { }

接着，来到组件当中，我们必须再次引入才能真正使用服务。官方推荐的写法是，在组件的构造函数中，将服务作为参数传进来：

import { Component } from '@angular/core';
import { UserService } from "../../services/user.service";@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
})
export class HomeComponent {constructor(public user: UserService) {console.log(user)}
}

Angular 服务的创建及使用相关推荐

Angular中怎样创建service服务来实现组件之间调用公共方法
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
angular2创建应用_如何使用Angular和SQLite3创建Electron应用程序。
angular2创建应用 by William Boxx 威廉·博克斯(William Boxx) 如何使用Angular和SQLite3创建Electron应用程序. (How to create ...
idea 编写scala_在Scala中编写Angular服务
idea 编写scala Those following my blog posts know that I like to take Scala everywhere. This time, let ...
angular服务一
angular服务 [$apply()] jquery内数据绑定要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...
netty 5 alph1源码分析(服务端创建过程）
研究了netty的服务端创建过程.至于netty的优势,可以参照网络其他文章.<Netty系列之Netty 服务端创建>是李林锋撰写的netty源码分析的一篇好文,绝对是技术干货.但抛开 ...
Android服务一创建启动服务
若要学习创建绑定服务,请查看下篇Android服务二创建绑定服务启动服务基于Service package service;import android.app.Service; import ...
angluar ajax实例,Angular服务Request异步请求的实例讲解
首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { thi ...
SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过,SAP Spartacus Angular Component,通过我们开发团队自定义的指令 cxComponentWra ...
在阿里云容器服务上创建一个使用Redis的Python应用
使用容器服务可以方便快速的创建应用,下面的例子展示如何在容器服务上创建一个使用Redis的Python应用,只需要简单的几步. 第一步:准备代码由于只是一个例子,所以我不可能使用太复杂的应用代码. ...

Angular 服务的创建及使用

Angular 服务的创建及使用相关推荐

最新文章

热门文章