问题标签 [angular-dependency-injection]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - 组件中的抽象方法实现具有未定义的依赖关系
抽象类:
组件NewsPage
实现LanguageChangeAware
抽象类:
我的问题是在组件的load()
实现中NewsPage
,注入的依赖NewsService
是未定义的。
用户 Antoine Boisier-Michaud 建议的一种可能的解决方案是在方法内进行订阅ngOnInit
。
更新版本LanguageChangeAware
:
angular - Angular 服务全局注入
有没有办法在不将服务注入每个组件的情况下访问服务的字段?或等效地:Angular 6 中是否存在一些“全局”服务的概念?
我的用例如下: 字段的文本标签在应用程序启动时由名为 ConfigurationManagementService 的服务检索。该服务有一个可观察的字段 CurrentApplicationContext$,它有一个对象字段 ApplicationConfiguration,它有一个对象字段标签。(这与后端的设置方式有关)。
现在:要在组件视图中使用标签,我必须将 ConfigurationManagementService(此处为 ConfigurationManagement)注入每个组件,然后订阅它(幸运的是我可以使用直接异步管道方法),如下所示:
我的问题是:还有另一种更短的方法来完成这个吗?因为如果您按照前面提到的对应用程序中的每个组件和每个文本字段执行它,这是一项非常耗时且乏味的任务。
谢谢!
angular - 在每个组件中提供唯一的服务实例
我有一种情况,我希望能够在页面上同时使用多个小部件组件。我想隔离 ContainerComponent 依赖项,以便每个 ContainerComponent 实例引用唯一的服务实例。
例如,我希望以下组件的每个实例都有一个唯一的“FhirService”实例:
服务定义:
这是怎么做到的?
angular - 使用“forRoot”将配置数据传递给角度库的依赖项
我创建了两个 Angular 库,一个将另一个作为依赖项。
需要使用 forRoot 方法配置依赖项。如何将配置数据从父库传递给它的依赖项?
例如,假设我们有TopLevelLib
,它OtherLib
作为依赖项。OtherLib 需要使用 forRoot 传递一个配置对象。
最终用户的 AppModule,导入到
TopLevelLib - 由最终用户导入 AppModule
OtherLib - 由 TopLevelLib 导入
我需要将配置对象实例从 TopLevelLib 传递到 OtherLib。这样当最终用户使用 forRoot 配置 TopLevelLib 时,OtherLib 将配置相同的数据。
关于如何实现这一点的任何想法?
angular - 没有装饰器的组件的角度依赖注入
我遇到了一些代码,其中一些组件可以访问它们的父组件实例,但我无法弄清楚“注入”是如何发生的。
我希望代码适合其中一种情况,但是@Injectable
父组件中没有专用的属性绑定,也没有装饰器,@Host
子组件构造函数中也没有。那么,Angular 怎么知道它必须将父组件实例作为子组件构造函数中的第一个参数注入呢?这是因为父组件和子组件属于同一个模块吗?这里是否发生了任何隐含行为?
相关代码片段
接收父实例的子组件继承自一个通用抽象类
(该类与角度组件无关)
孩子们有类似的 @component 装饰器和构造器:
“父”组件声明:
angular - 如何为从组件导入的模块设置配置(或 useValue)?
我们很清楚有多种方法可以为导入的模块设置配置。我们有 '.forRoot()'、'useValue'、'useClass' 等要在导入模块中使用。
例如,我们想使用ng2-currency-mask。直接从文档中的示例用法中获取,我们可以CurrencyMaskModule
通过在导入模块(在本例中为 AppModule)中执行此操作来设置配置:
但是,如果您想useValue
动态设置 config/ (例如设置页面),我们必须从组件中更改它。现在我使用以下直接编写的代码进行了测试AppComponent
:
不幸的是,这种变化并没有反映到使用的组件上,ng2-currency-mask
并且从AppModule
(带有“Module$” asprefix
的那个)设置的配置仍然有效。
您如何从组件中成功覆盖/设置模块的配置?
更新:
我尝试过使用ReflectiveInjector
'sresolve
和fromResolvedProviders
方法也不起作用:
并且使用静态Injector
不起作用:
旁注:我很清楚这个特定模块(CurrencyMaskModule
)的替代解决方案,我们实际上可以只创建一个具有可变属性的提供程序来保存该CurrencyMaskConfig
值。但这将让我被迫更改所有输入字段以options
使用该currencyMask
指令向所有输入字段添加属性。换句话说,我将[options]="myConfigProvider.currencyMaskConfig"
在所有需要它的输入中插入类似的东西。我希望看到一种更好/更优雅的方式来做到这一点。
angular - 在另一个单例服务中创建 Angular 单例服务的新实例
我是 Angular 的新手,正在尝试弄清楚如何将我的 Angular 服务(游戏服务)注入另一个将成为 Resolver(游戏解析器)的 Angular 服务。我的应用程序中通常只创建一个游戏服务实例,并且我成功地将它注入到我的每个组件中,但是当需要我的游戏解析器服务时,它会创建一个新的游戏服务实例,即使游戏服务是应该是单身人士。
我尝试在我的 NgModule 的 'providers' 数组中声明这两个服务,以尝试使它们成为单例服务,并且我还尝试了在 @Injectable 装饰器中声明 'providedIn:'root' 的方法,但是当调用游戏解析器服务构造函数时,将创建游戏服务的新实例。
关于角度依赖注入的层次结构,我有什么不明白的地方吗?我需要 GameService 成为应用程序所有部分的单例服务,因此我需要将单例实例注入 Game Resolver Service 而不创建新实例。
angular - 如何代理使用 DI 的组件?
我正在尝试为 Angular 组件创建代理。从这个解决方案开始: https ://github.com/Microsoft/TypeScript/issues/4890#issuecomment-141879451
我最终得到了这个:
用法:
这样可行。问题是如果我取消对构造函数的注释它会失败:heroService is undefined
。
我认为这与 Angular 的 DI 有关,因为以下在 TS Playground 上运行良好(构造函数未注释):
angular - 从服务中为提供商获取价值
我正在尝试将一些值(我从 http 请求中获得)从另一个服务分配给app.module.ts
.
我的服务如下所示:
在我的app.module.ts
我试图获得这样`baseHref`
的价值:
但我得到一个错误:`Cannot read property 'baseHref' of undefined`
。
看起来服务没有初始化,但为什么?将此变量从服务传递给提供者的最佳方式是什么?
angular - 将注入令牌传递到库中定义的服务中,在角度应用程序中使用
我创建了一个角度库,比如说library1
,它定义并公开了一个服务APIService
。有APIService
一个构造函数参数(URL: string
),它被注入一个定义为的注入令牌,
const URL_TOKEN = new InjectionToken<string>('API_BASE_URL');
我library1
在另一个库中使用它,例如library2
,我APIService
在一个名为LoginComponent
.
现在我有一个成熟的 Angular 应用程序,我使用 library2 中的 LoginComponent,我希望从应用程序provide
中获取 value 。URL
我想知道是否有办法实现这一目标。我也不确定如何以一种很好的方式URL_TOKEN
从一直到有角度的应用程序。library1
更新
当我尝试将 API_BASE_URL 作为注入时,
providers: [ {provide: new InjectionToken<string>('API_BASE_URL'), useValue: 'http://endpoint'} ]
我在浏览器中遇到异常:ERROR NullInjectorError: StaticInjectorError(AppModule)[InjectionToken API_BASE_URL]: