Angular 2 注入了全局依赖关系

Angular 2 injecting a global dependency

本文关键字：依赖 关系 全局 注入 Angular      更新时间：2023-09-26

我想做的是让每个组件都可用的服务，但我不希望将其导入到所有组件中。(显然，如果我必须这样做，我会的。

我想，也许是错误的，我可以做一些类似于我在应用程序中引导HTTP_PROVIDERS的事情，使其可用于 HTTP(如果我没记错的话，这是必需的(。

例如，在我的 app.ts 文件中：

import { bootstrap } from 'angular2/platform/browser';
import { Injectable } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import 'rxjs/add/operator/map';
import { WidgetService } from './widget.service';
import { BuilderComponent } from './modules/builder/builder.component';
bootstrap(BuilderComponent, [HTTP_PROVIDERS, WidgetService]);

我希望这将使WidgetService在所有子/孙子等组件中可用。(BuilderComponent是有多个孩子/孙子的父母。

我在使用@Inject注入它时遇到的错误，并且@Injectable未在服务本身中使用：

未

捕获的引用错误：未定义窗口组件服务

在服务中使用@Injectable而不使用@Inject注入服务时出现的错误：

无法解析"MyComponent"(NonGlobalService， ？(的所有参数。确保所有参数都使用 Inject 修饰或具有有效的类型注释，并且"MyComponent"使用 Injectable 装饰。

我不确定为什么MyComponent需要用Injectable装饰，但是当我用@Injectable装饰它时，我遇到了同样的错误。

widget.service.ts

import { Injectable, NgZone } from 'angular2/core';
@Injectable()
class WidgetService {
    constructor(private _zone: NgZone) {
    }
    // other methods here...
}
export { WidgetService };

以及我如何尝试注入它：

class MyComponent {
    constructor(private _nonGlobalService: NonGlobalService,
                private _widget: WidgetService) {
    }
}

总结一下：

  1. 是否可以将服务全局注入所有组件，而无需手动将其导入每个组件。(IE：如果我想要，可以在任何地方使用它。
  2. 如果可以，有人可以解释我做错了什么，并告诉我如何正确地做。
  3. 感谢您的时间和答案！

有不同的方法。

您可以创建一个包装服务，并且只注入这个包装服务。

@Injectable()
export class FooService {
  doFoo() {...};
}
@Injectable()
export class BarService {
  doBar() {...}
}
@Injectable()
export class GlobalService {
  constructor(public foo:FooService, public bar:BarService) {
  }
}

这里需要导入GlobalService

export class MyComponent {
  constructor(global:GlobalService) {
    global.foo.doFoo();
    global.bar.doBar();
  }
}

这样，您无需为组件导入任何内容

bootstrap(AppComponent, [
    provide('foo', { useClass: FooService }), 
    provide('bar', { useClass: BarService })]);
export class MyComponent {
  constructor(@Inject('foo') foo, @Inject('bar') bar) {
    foo.doFoo();
    bar.doBar();
  }
}

但我不认为第二种方法是可取的。您不会获得任何 IDE 支持，因为服务的类型在 MyComponent 中是未知的。

相关文章：