标签: angular-dependency-injection

我正在使用自定义Http提供程序来处理API身份验证错误.在我的CustomHttp中,当API发出401状态错误时,我需要将用户重定向到登录页面.这很好用!

app.module.ts

export function loadCustomHttp(backend: XHRBackend, defaultOptions: AppRequestOptions,
  router: Router, dataHelper: DataHelperService) {
  return new CustomHttp(backend, defaultOptions, router, dataHelper);
}

@NgModule({
// some declarations, imports, ...
providers: [
// some services ...
 {
      provide: Http,
      useFactory: loadCustomHttp,
      deps: [XHRBackend, RequestOptions, Router, DataHelperService] 
    }
});

定制http.ts

import { Injectable } from '@angular/core';
import { Http, RequestOptions, RequestOptionsArgs, ConnectionBackend, Request, Response } from '@angular/http';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';

import { DataHelperService } from '../helpers/data-helper.service'; …

在我的 Angular 9 应用程序中，我有一个抽象类：

export abstract class MyAbstractComponent {
  constructor(
    protected readonly cd: ChangeDetectorRef,
  ) {
    super();
  }

  // ...
}

和一个扩展它的组件：

@Component({
  // ...
})
export class MyConcreteComponent extends MyAbstractComponent {
  // ...
}

一切正常，除了测试，我收到以下错误：

错误：此构造函数与 Angular 依赖注入不兼容，因为它在参数列表索引 0 处的依赖项无效。如果依赖类型是像字符串这样的原始类型，或者此类的祖先缺少 Angular 装饰器，就会发生这种情况。

请检查 1) 索引 0 处参数的类型是否正确，以及 2) 是否为此类及其祖先定义了正确的 Angular 装饰器。

在 Angular 9 中，可注入装饰器选项providedIn有一个名为any. root和 和有any什么区别？

在我使用的情况下，服务是否被视为单例any？

@Injectable({providedIn: 'any'})
class UsefulService {
}

我使用 Angular 8。

这个问题仅适用于 Angular DI 专家。

首先，我制作了一个 Angular 库，将在许多项目中重用。

在这个库中，我创建了一个抽象服务，必须在使用它的项目中定义该服务。

我在我的库中定义了一个名为 BridgeService 的抽象类

在我的主项目中，我创建了 BridgeService 来实现它：（在接下来的几行中，我将向您展示抽象的 BridgeService）

主要项目 > BridgeService :

import { BridgeService as AbstractBridgeService } from 'myLibrary';

@Injectable()
export class BridgeService implements AbstractBridgeService {

    hello(){
        alert('hello Word');
    }
}

主项目>用户模块：

import { UsersModule as LibraryUsersModule } from 'myLibrary';

@NgModule({
    imports: [
        CommonModule,
        LibraryUsersModule,
    ],
    //...
    providers: [
        BridgeService
        // some try:
        //{ provide: BridgeService, useClass: BridgeService }
    ],
})
export class UsersModule {

    constructor(private bridgeService: BridgeService){
        this.bridgeService.hello(); …

我创建了两个 Angular 库，其中一个库依赖另一个库。

需要使用 forRoot 方法配置依赖关系。我如何将配置数据从父库传递到它的依赖项？

例如，假设我们有TopLevelLib，它有OtherLib一个依赖项。需要使用 forRoot 向 OtherLib 传递一个配置对象。

最终用户的AppModule，导入到

@NgModule({
  imports: [
    TopLevelLib.forRoot(someConfigData)
  ],
  declarations: [...],
  exports: [...]
})
export class AppModule { }

TopLevelLib - 由最终用户导入到 AppModule

@NgModule({
  imports: [
    ...
    OtherLib.forRoot(*****what goes in here?*****)
  ],
  declarations: [...],
  exports: [...]
})
export class TopLevelLib {
  static forRoot(config: ConfigObj): ModuleWithProviders {
    return {
      ngModule: SampleModule,
      providers: [{ provide: SomeInjectionToken, useValue: config }]
    };
  }
}

OtherLib - 由 TopLevelLib 导入

@NgModule({
  imports: [...], …

在我的 Angular 应用程序中，我试图在我的模块中使用工厂提供程序：

export function getMyFactory(): () => Window {
  return () => window;
}

@NgModule({
  providers: [
    { provide: WindowRef, useFactory: getMyFactory() },
  ],
})
export class MyModule {}

但这失败了：

在为导出的符号“MyModule”生成的元数据中遇到错误：

收集的元数据包含运行时会报错：Lambda not supported

我正在尝试导出一个角度常量，我需要设置一个键，其值将从服务中返回。我尝试使用以下代码：

这是我的user-config.ts文件：

export const USER_CONFIG = {
    username: new UserService().getUsername()
}

这是我想以常量注入的UserService文件：

 export class UserService{
        constructor(someOtherService: SomeOtherService)
        getUsername() {
            return this.someOtherService.getDetails('some/url')
        }
    }

我无法解决此问题。需要帮忙。

我在一个惰性模块中导入了一个 ng-bootstrap 模态库。

@NgModule({imports: [NgbModalModule]})

该库NgbModal在 root 中提供了一项服务。

@Injectable({providedIn: 'root'})
class NgbModal {...}

我将它注入到一个组件中。

constructor(private modal: NgbModal) {}

我开发了那个的类扩展。

export class CustomNgbModal extends NgbModal{...}

如何使用 CustomNgbModal 覆盖 NgbModal 类型？

使用模块将是

{provide: NgbModal, useClass: CustomNgbModal}

但是使用providedIn根元数据，没有线索。

那么，如何覆盖 root 中提供的模块？

在@Input属性中注入“服务”依赖项是一个好习惯吗？此上下文中的服务不是在根级别管理的单例实例，而是接口不同实现的多个实例。

考虑以下示例：在 Angular 库中，ShapeComponent 依赖于 ShapeService（接口）。

成分

@Component({
  selector: 'ex-shape',
  templateUrl: '..',
})    

export class ShapeComponent {
   constructor(shapeServiceCtor: ShapeService)
    
   @Input shapeServiceInput: ShapeService;
}

解决依赖关系的一种简单方法是设置输入属性，如下面的代码所示。

<ex-shape [shapeServiceInput]="rectangleShapeService" />
<ex-shape [shapeServiceInput]="ellipseShapeService" />
<ex-shape [shapeServiceInput]="polygonShapeService" />

上述方法是否适用于解决组件中的依赖关系？

如果使用输入属性方法，则服务/依赖项必须以相同的方式传播到子组件。这种方法的缺点是父组件必须接受所有依赖项作为输入属性。

是否有任何推荐的方法可以在库级别注入和作用域依赖项？

Angular的新手。我的应用程序包含1个服务和3个组件。编译成功。我收到此错误，不知道出了什么问题：

未捕获的错误：无法解析ApplicationModule的所有参数：（？）。

调试给我的想法很少。似乎问题与具有空依赖项的NSLocaleLocalizations有关（如果可以的话）-请参见以下屏幕截图：

这是一些代码：如果需要其他任何信息，请告诉我。非常感谢您的帮助-非常感谢。

package.json

{
  "name": "angular_app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-aot": "ng build --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
  "@angular/animations": "^6.0.0",
  "@angular/cdk": "^6.0.0",
  "@angular/common": "^6.0.0",
  "@angular/compiler": "^6.0.0",
  "@angular/core": "^6.0.0",
  "@angular/forms": "^6.0.0",
  "@angular/http": "^6.0.0",
  "@angular/material": "^6.0.0",
  "@angular/platform-browser": "^6.0.0",
  "@angular/platform-browser-dynamic": "^6.0.0",
  "@angular/router": "^6.0.0",
  "core-js": "^2.5.4",
  "express": "^4.16.4",
  "rxjs": "^6.0.0",
  "zone.js": "^0.8.26"
  },
  "devDependencies": {
  "@angular/compiler-cli": "^6.0.0",
  "@angular-devkit/build-angular": "~0.6.0",
  "typescript": "~2.7.2",
  "@angular/cli": "~6.0.0", …