Angular学习笔记(七)之注入器和提供器入门

本文介绍了Angular中的注入器和提供器基本概念。注入器是Angular自动通过组件构造函数进行依赖注入的类,而提供器则定义了依赖对象的实例化方式。文章通过一个依赖注入的股票信息展示示例,展示了如何在组件中使用服务,并解释了提供器在模块和组件级别的作用域。同时,提到了`Injectable()`装饰器的作用,它使得构造函数能够注入其他服务。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基本概念

注入器:Angular提供的类,一般不需调用,会自动通过组件的构造函数注入。

constructor(productService:ProductService){...}

提供器:为了让注入器明白,需要被注入的对象如何实例化。一般写在AppModule中的providers中,特殊情况写在组件@Component注解中

//AppModule 中的写法
@NgModule({
    providers:[ProductService]
    //等价于
    //providers:[{provide:ProductService,useClass:ProductService}]
})
export class AppModule { }
//组件中的写法
@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css'],
  providers:[{provide:ProductService,useClass:ProductService}]
})

依赖注入demo

假设,通过不同的服务方法展示不同的股票信息

思路如下
- 新建组件stock和服务stock.service.ts,使用依赖注入显示股票信息1
- 新建新的服务stock2.service.ts,显示股票信息2

新建组件stock和服务stock.service.ts

//stock.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class StockService {

  constructor() { }
  getStock():Stock{
    return new Stock(1,'NBM');
  }
}
export class Stock{
    constructor(public id:number,public name:string){}
}
//stock.component.ts
import { Component, OnInit } from '@angular/core';
import { StockService,Stock } from '../shared/stock.service';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  stock:Stock;
  constructor(public stockService:StockService) { }

  ngOnInit() {
    this.stock = this.stockService.getStock();
  }

}
//app.module.ts
providers: [StockService]

当使用服务2时,只需在stock.component中构造函数注入服务2即可。

import { Injectable } from '@angular/core';
import {StockService,Stock} from './stock.service';

@Injectable()
export class Stock2Service implements StockService {

  constructor() { }
  getStock():Stock{
    return new Stock(2,'software');
  }

}

import { Component, OnInit } from '@angular/core';
import { Stock2Service } from '../shared/stock2.service';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  stock:Stock;
  constructor(public stockService:Stock2Service) { }

  ngOnInit() {
    this.stock = this.stockService.getStock();
  }

}
//app.module.ts
providers: [StockService,Stock2Service]

Tips:新建服务的命令行写法:ng g service stock,之前使用cnpm命令,导致无法创建service 文件。解决办法是,卸载了之前的@angular/cli,改用npm install g @angular/cli 就可以了。


提供器的作用域

提供器可写在模块和组件。

  • 模块:写在AppModule的providers声明中,全局作用域,对所有组件可见
    组件
  • 组件:写在组件@Component注解中,写在属性providers中,只对声明它的组件及其子组件可见,一般不推荐使用
//写在组件的service
import { Component, OnInit } from '@angular/core';
import { Stock,StockService } from '../shared/stock.service';
import { Stock2Service } from '../shared/stock2.service';

@Component({
  selector: 'app-stock2',
  templateUrl: './stock2.component.html',
  styleUrls: ['./stock2.component.css'],
  providers:[{provide:StockService,useClass:Stock2Service}] 
})
export class Stock2Component implements OnInit {
  stock:Stock;
  constructor(public stockService:StockService) { }

  ngOnInit() {
    this.stock = this.stockService.getStock();      
  }

}
//与写在模块中的服务相比,只是provider的写法不同,而构造函数注入的依然是同个名字的StockService,但组件服务的优先级>模块服务,所以构造函数中的StockService将优先使用组件中的 providers:[{provide:StockService,useClass:Stock2Service}] 

Injectable()

写Injectable(),使其构造函数可以注入其它服务,而组件中@Component装饰器,管道装饰器都是Injectable的子类。所以,简而言之——@Injectable()、@Component 等都是为了使其构造函数可注入其他服务

//在StockService 服务中注入服务AnotherstockService 
import { Injectable } from '@angular/core';
import { AnotherstockService } from '../shared/anotherstock.service';

@Injectable()
export class StockService {

  constructor(public anotherstockService:AnotherstockService) { }
  getStock():Stock{
    this.anotherstockService.login('getstock');
    return new Stock(1,'NBM');
  }
}
export class Stock{
    constructor(public id:number,public name:string){}
}
//AnotherstockService 服务
import { Injectable } from '@angular/core';

@Injectable()
export class AnotherstockService {

  constructor() { }
  login(message:string){
    console.log(message);
  }

}

而stock组件注入的StockService不需任何改变就可以在页面打印console.log(message)

学习service的时候深深地掉入了cnpm的坑,查了一下应该是cnpm的资源欠缺导致,换成npm就可以了

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值