协会网站建设制作,上饶高端网站建设,有什么做设计接任务的网站,网站首页漂浮广告代码在Angular中有很多方式可以将服务类注册到注入器中:
Injectable 元数据中的providedIn属性 NgModule 元数据中的 providers属性 Component 元数据中的 providers属性 创建一个文件名叫名 hero.service.ts叫 hero 的服务 hero.service.ts
import { Injectable } from angular…在Angular中有很多方式可以将服务类注册到注入器中:
Injectable 元数据中的providedIn属性 NgModule 元数据中的 providers属性 Component 元数据中的 providers属性 创建一个文件名叫名 hero.service.ts叫 hero 的服务 hero.service.ts
import { Injectable } from angular/core;Injectable({providedIn: root,
})
export class HeroService {constructor() { }// 新增加setName方法setName(name:string):string{return 姓名${name};}} 1.Injectable 元数据中的providedIn属性
providedIn: root 告诉 Angular在根注入器中注册这个服务,这也是使用CLI生成服务时默认的方式. 这种方式注册,不需要再NgModule装饰器中写providers,而且在代码编译打包时,可以执行摇树优化会移除所有没在应用中使用过的服务。推荐使用此种方式注册服务
使用providedIn的话后面直接在项目中使用了。
使用heroes.component.ts
import { Component, OnInit } from angular/core;
import { HeroService } from ../hero.serviceComponent({selector: app-heroes,templateUrl: ./heroes.component.html,styleUrls: [./heroes.component.css]
})
export class HeroesComponent implements OnInit {constructor(private heroService:HeroService) { }ngOnInit() {this.heroService.setName(张三);}
} 2.NgModule 元数据中的 providers属性
改写 hero.service.ts里面的Injectable如下
import { Injectable } from angular/core;Injectable() // 删掉了 {providedIn: root}
export class HeroService {...} xx.module.ts , 例如app.module.ts
...NgModule({providers: [HeroService,// { provide: HeroService, useValue: HeroService }],
})... 然后就可以在使用拉使用方法同1 heroes.component.ts文件
3.Component 元数据中的 providers属性 hero.service.ts里面的Injectable删掉 {providedIn: root},同2 hero.service.ts文件
改写heroes.component.ts
import { Component, OnInit } from angular/core;
import { HeroService } from ../hero.serviceComponent({selector: app-heroes,templateUrl: ./heroes.component.html,styleUrls: [./heroes.component.css],providers: [HeroService] // 新增 providers: [HeroService]
})
export class HeroesComponent implements OnInit {constructor(private heroService:HeroService) { }ngOnInit() {this.heroService.setName(张三);}
} 三种用法总结
Injectable 元数据中的providedIn属性
//service.ts
Injectable({providedIn:root})//component.ts
constructor(private heroService:HeroService) { } NgModule 元数据中的 providers属性
// service.ts
Injectable() //module.ts
NgModule({providers: [HeroService ]
}) Component 元数据中的 providers属性
// service.ts
Injectable() // component.ts
Component({...selector: app-heroes,providers: [ HeroService ]
}) 原文链接https://blog.csdn.net/sllailcp/article/details/102548144
