在Angular2中的两个服务之间切换
在Angular2中，可以通过依赖注入来实现两个服务之间的切换。依赖注入是一种设计模式，用于将依赖关系从一个对象传递给另一个对象，以实现松耦合的组件之间的交互。
在Angular2中，可以使用@Injectable装饰器来标记一个服务类，以便它可以被注入到其他组件或服务中。然后，可以在构造函数中声明对其他服务的依赖，并通过依赖注入将它们传递给该服务。
下面是一个示例，展示了如何在两个服务之间切换：
- 创建第一个服务（ServiceA）：import { Injectable } from '@angular/core'; @Injectable() export class ServiceA { constructor() { } public doSomething(): void { console.log('ServiceA is doing something.'); } }
- 创建第二个服务（ServiceB）：import { Injectable } from '@angular/core'; @Injectable() export class ServiceB { constructor() { } public doSomethingElse(): void { console.log('ServiceB is doing something else.'); } }
- 创建一个组件，并在构造函数中注入这两个服务：import { Component } from '@angular/core'; import { ServiceA } from './service-a.service'; import { ServiceB } from './service-b.service'; @Component({ selector: 'app-my-component', template: ` <button (click)="toggleServices()">Toggle Services</button> `, }) export class MyComponent { private serviceA: ServiceA; private serviceB: ServiceB; private useServiceA: boolean = true; constructor(serviceA: ServiceA, serviceB: ServiceB) { this.serviceA = serviceA; this.serviceB = serviceB; } public toggleServices(): void { if (this.useServiceA) { this.serviceA.doSomething(); } else { this.serviceB.doSomethingElse(); } this.useServiceA = !this.useServiceA; } }
在上面的示例中，MyComponent组件通过构造函数注入了ServiceA和ServiceB两个服务。通过点击按钮，可以切换使用哪个服务，并调用相应的方法。
请注意，这只是一个简单的示例，用于演示在Angular2中切换两个服务之间的方法。在实际开发中，可能会有更复杂的场景和需求。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI）：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 移动推送服务（TPNS）：https://cloud.tencent.com/product/tpns
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBCS）：https://cloud.tencent.com/product/tbcs
- 腾讯云元宇宙（Tencent Cloud Metaverse）：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
我正在使用角2和茉莉花来尝试和测试几个服务，一个服务依赖于另一个服务。我一直收到服务提供者的错误。
import {Injectable} from 'angular2/core';
@Injectable()
export class ServiceA {
constructor() {
}
}
serviceA规范
import {it,
describe, expect,
beforeEach,
beforeEachProviders, inject}
from 'angular2/testing';
import {S
浏览 3提问于2016-04-29得票数 1
1回答
我需要在两个服务之间进行通信，其中两个服务都依赖于A->B和B->A，但在实现时得到循环依赖错误。
@Injectable()
export class ServiceA{
constructor(private serviceB:ServiceB){
}
OnInit(){
this.serviceA.Callme();
}
afterServiceBInitialization(){
//doing logic here
}
}
@Injectable()
export class ServiceB{
constructor(private serviceA:Ser
浏览 4提问于2022-03-08得票数 0
我有一个服务，比如ServiceA，它执行大量的服务器通信工作。该服务在整个应用程序中被其他服务(包括ServiceB )大量使用。有什么办法我可以注册一次吗？(在App中)，使其可用于正在子组件中注册的所有服务？现在看来，我必须在每一个称为它的服务处登记它。
当我将ServiceA添加到AppComponent的viewProviders数组中时，当注入器试图将ServiceB注入子组件时，将得到No provider for ServiceA!异常。
AppComponent
@Component({
moduleId: module.id,
selector: 'app
浏览 0提问于2016-07-22得票数 0
回答已采纳
我有两个服务，都是可注射的。ServiceA通过提供者数组提供给组件，并且在任何地方都工作得很好。ServiceB是一个单例，在其模块的提供者数组中，在任何地方都工作得很好。ServiceA需要保持为单例，而ServiceB需要保持为单例。
我的问题是，现在我需要从ServiceA访问ServiceB，但不知道如何访问它。似乎我不能把非独生子女的服务注入到单身人士身上。
我遇到的一切都告诉我要将服务放在引导或模块声明中，但正如我前面提到的，我不能这样做，因为我需要ServiceA作为非单例。
// module setup
... providers: [ServiceB]
// non-s
浏览 6提问于2017-02-16得票数 5
回答已采纳
我有以下扩展BaseRequestOptions类的代码：
import { Injectable } from '@angular/core';
@Injectable()
export class AppRequestOptions extends BaseRequestOptions {
constructor(private serviceA:ServiceA) {
super();
}
merge(options?: RequestOptionsArgs): RequestOptions {
浏览 3提问于2016-07-18得票数 1
回答已采纳
如果我想把一个非单例服务注入到Angular中的另一个非单例服务中，该怎么做呢？
假设我有一个使用如下ServiceA的ComponentA
@component({
selector: "componentA",
providers: [ServiceA]
})
export class ComponentA {
constructor(private serviceA: ServiceA) {}
}
现在，ServiceA也依赖于ServiceB，所以我需要注入它
@Injectable()
export class ServiceA {
construc
浏览 0提问于2018-02-28得票数 14
3回答
我用角2编写了两个服务，其中一个是Http的基本定制类，它具有一些自定义功能(目前它看起来是基本的，但它将扩展)：
ServerComms.ts
import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
@Injectable()
export class ServerComms {
private url = 'myservice.com/service/';
constructor (public http: Http) {
浏览 5提问于2016-04-15得票数 0
回答已采纳
2回答
我有两个服务和一个组件。
服务A：
@Injectable({
providedIn: 'root'
})
export class AService {
public propertyA = 'propertyA initial state';
constructor(){}
}
服务B：
@Injectable({
providedIn: 'root'
})
export class BService{
con
浏览 0提问于2019-01-17得票数 0
回答已采纳
我有一个NavBar组件，它加载QApi服务，QApi服务加载UserService，但是我得到以下错误：
EXCEPTION: No provider for UserService! (NavBarComponent -> QApi -> UserService)
要么我根本就没有依赖注入的概念，我犯了一个愚蠢的错误，或者这只是比较复杂的方式与本机开发.谢谢你的帮助。
这里我的代码：
UserService：
import {Injectable} from 'angular2/core';
//import {User} from '../data-s
浏览 5提问于2015-12-31得票数 3
回答已采纳
1回答
我尝试创建一个示例angular2服务并使用它，但我不确定我所犯的错误。组件无法调用服务方法，请参阅柱塞获取更多详细信息
我的服务代码如下所示
import { Injectable } from 'angular2/core';
import { HTTP_PROVIDERS, Http, Headers, Response, JSONP_PROVIDERS, Jsonp } from 'angular2/http';
import { Configuration } from './Configuration';
import 'rx
浏览 5提问于2016-06-12得票数 1
回答已采纳
在angular2中使用typeScript时，我遇到了问题。
我想创建一个helper.ts文件，导出许多常用的类/函数以供重用。
但是Helper class需要在构造函数中导入其他服务，所以当另一个类导入Helper class时，它必须设置参数就是那些服务。我不想这样。
如何编写import {Helper} from ..时可以随时随地使用的Helper class
这是我的示例: Helper.ts
import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
import
浏览 1提问于2016-02-27得票数 41
回答已采纳
5回答
我想知道在Angular2中是否有合适的方式注入接口？(请参阅如下所示)
我认为这与接口上缺少@Injectable()装饰符有关，但似乎这是不允许的。
致以问候。
当CoursesServiceInterface作为接口实现时，TypeScript编译器会报告"CoursesServiceInterface找不到名称“：
import {CoursesServiceInterface} from './CoursesService.interface';
import {CoursesService} from './CoursesService.servic
浏览 6提问于2016-05-03得票数 76
由于孩子的知识，我正在努力将提供者加载到父母中。设想以下情况：
@Injectable()
export class ServiceA {
constructor(
@Inject(MY_TOKEN)
private serviceB: ServiceBImpl
) { }
run() {
this.serviceB.b();
}
}
ServiceBImpl只是一个简单的接口
export let MY_TOKEN = new InjectionToken<ServiceBImpl>('MY
浏览 0提问于2018-07-24得票数 0
1回答
以前，我有单独的接口和服务文件，但是我将它们合并到同一个文件中，因为我总是将它们合并在一起。即user.interface.ts + user.service.ts => user.service.ts -其中声明用户界面和服务。它使得开发速度更快，不必打开/需要这么多文件。
我遇到的一个问题是，当从文件导入接口(这会创建一个文件循环)时，我会得到一个循环依赖项警告。我想这没什么问题，只是个愚蠢的警告？如果是的话，有没有一种方法可以过滤掉这些警告而不过滤循环服务？
文件示例
服务A
import { ServiceB } from '../serviceB.service'
浏览 1提问于2019-10-03得票数 0
2回答
有没有办法通过注释将(自动注册)单例服务自动注册到C# DI容器 () ？
例如，类似于的，中的@injectable()注释，中的自动装配，或中的自动装配
见下面的角度示例：
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class UserService {
}
此时，我必须以这种方式手动将每个单例服务添加到ServiceCollection中(有时忘记这样做)：
internal static ServiceProvide
浏览 0提问于2020-04-25得票数 1
回答已采纳
我正在尝试弄清楚功能模块在angular中是如何工作的。
我将ComponentA和ServiceA包装到一个功能模块ModuleA中。ComponentA中需要ServiceA。代码如下：
import { ServiceA } from '...
import { ComponentA } from '...
@NgModule({
imports: [
CommonModule
],
declarations: [ComponentA],
providers: [ServiceA]
})
export class Modu
浏览 10提问于2018-09-01得票数 0
1回答
angular2 -服务值不变
、、、、
我有一条叫家的路线，它有三条儿童路线，文件，邮件和垃圾。在主路由组件中，它有一个名为'myUser‘的变量。我创建了一个服务，以便他们都能共享myUser值，但是由于某种原因，服务变量值不会改变。
服务
import { Injectable } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
@Injectable()
export class HomeService {
// Mock user, for testing
myUser =
浏览 2提问于2016-08-03得票数 0
回答已采纳
我是Angular2的新手。我试图从组件中调用简单的服务，但是当我试图调用它时，我得到的是未定义的服务实例：
这是我的代码：
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.js">&l
浏览 5提问于2016-12-27得票数 2
1回答
我正在尝试使用request发出一个简单的HTTP请求，但我一直收到以下错误：
属性'http‘在'WorksService’类型中不存在。
import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
export class Work {
constructor(p
浏览 2提问于2016-03-23得票数 1
回答已采纳
我得到了问题-我需要为不同的模块获取不同的服务实例，但如果我在模块中共享服务，则为我的所有模块获取一个服务实例。
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, ServiceComponent, Service2Component ],
bootstrap: [ AppComponent ],
providers: [ UserService ]
})
export class AppModule { }
因此，如果我在这里使用provider，或者在以下组件的某
浏览 0提问于2016-12-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
