Angular服务Service

作者: 虎虎 分类: 前端 发布时间: 2023-09-15 19:40 阅读次数:519

一、创建服务

import {Injectable} from '@angular/core';
@Injectable({providedIn:'root'})
export class TestService{}
export class AppComponent{
    constructor(private testService:TestService){}
}

二、服务的作用域

使用服务可以轻松实现跨模块跨组件共享数据,这取决于服务的作用域。
1)在根注入器中注册服务,所有模块可以直接使用同一个服务实例对象。

import {Injectable} from "@angular/core";
@Injectable({providedIn:'root'}) //指定服务的作用范围,这里表示放到根注入器中
export class CarListService{}

2)在模块级别注册服务,该模块中的所有组件使用同一个目标服务实例对象。模块中的declare的组件要想在别的模块中使用需要export,并且在别的模块中需要依赖import该模块
方式一:

import {Injectable} from '@angular/core';
import {CarModule} from './car.module';
@Injectable({providedIn:'CarModule'})
export class CarListService{}

方式二:

import {CarListService} from './car-list.service';
@NgModule({providers:[CarListService],})
export class CarModule{}

3)在组件级注册服务,该组件及其子组件使用同一个服务实例对象。

import {Component} from "@angular/core";
import {CarListService} from '../car-list.service.ts'
@Component({
    selector:"app-car-list",
    templateUrl:'./car-list.component.html',
    providers:[CarListService]
})
不足之处望指正

发表评论

邮箱地址不会被公开。 必填项已用*标注

标签云