typescript - Angular 6 将可注入(inject)数组传递给 app.module.ts 中的提供程序会导致 : "Error in Cannot read property ' length' of undefined"

Question

我有以下数组，其中包含从服务连接的injectables:

import { YouTubeSearchService,
     YOUTUBE_API_KEY,
     YOUTUBE_API_URL } from './you-tube.service';

export const youTubeSearchInjectables: Array<any> = [
    { provide: YouTubeSearchService, useClass: YouTubeSearchService },
    { provide: YOUTUBE_API_KEY, useClass: YOUTUBE_API_KEY },
    { provide: YOUTUBE_API_URL, useClass: YOUTUBE_API_URL }
];

我正在尝试将它传递给 app.module.ts 中的提供者:

/*other imports*/
import { youTubeSearchInjectables } from './search-result/you-tube-search.injectables';

@NgModule({
  declarations: [
    AppComponent,
    SimpleHttpComponent,
    SearchResultComponent,
    SearchBoxComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [youTubeSearchInjectables],
  bootstrap: [AppComponent]
})
export class AppModule { }

但是，我得到“无法读取未定义的属性‘长度’中的错误”(只有一行，没有别的)。

我认为原因很可能与 Angular 的版本有关。我使用的是 6，本书项目是用版本 5 编写的。但是，关于依赖注入(inject)的 Angular 文档说书本方式是正确的方式……所以我有点困惑。或者，也许我只是遗漏了一些东西。

我实际上尝试手动将每个可注入(inject)程序添加到 app.module 中，但得到了同样的错误。

任何帮助将不胜感激

编辑:尝试“providedIn: 'root',”根据 ng6 更新，但这没有帮助。

以防万一 - 可注入(inject)类:

/*imports*/

export const YOUTUBE_API_KEY = 'keykeykey';
export const YOUTUBE_API_URL = 'https://www.googleapis.com/youtube/v3/search';

@Injectable({
  providedIn: 'root',
})
export class YouTubeSearchService {
  constructor(
    private http: HttpClient,
    @Inject(YOUTUBE_API_KEY) private apiKey: string,
    @Inject(YOUTUBE_API_URL) private apiUrl: string
  ) { }

  search(query: string): Observable<SearchResult[]> {
    // logic
  }
}

Answer 1

我发现您的代码有两个问题。首先是您在数组中使用数组来定义您的提供者。要么直接引用 youTubeSearchInjectables 变量，要么使用扩展运算符将导出的提供程序连接到模块的提供程序数组中。

第二个问题，在第一个问题解决之前您不会注意到，您应该为 YOUTUBE_API_KEY 使用 useValue 而不是 useClass > 和 YOUTUBE_API_URL 因为这两个不是类而是简单的字符串值。

const youTubeSearchInjectables: Array<any> = [
  { provide: YouTubeSearchService, useClass: YouTubeSearchService },
  { provide: YOUTUBE_API_KEY, useValue: YOUTUBE_API_KEY },
  { provide: YOUTUBE_API_URL, useValue: YOUTUBE_API_URL }
];

@NgModule({
  providers: [
    ...youTubeSearchInjectables
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }