Question

我正在尝试将服务注入另一个服务中

instagram.service> event.service.ts（主要服务） instagram是要注入到event.service内部的服务。

我已经在app.module中声明了instagram.service.ts。

我得到的错误是：

未捕获的错误：无法解析Instagram的所有参数：（？）。在语法错误（compiler.js：1021）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata中（compiler.js：10922）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata中（compiler.js：10815）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata中（compiler.js：11037）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata （compiler.js：11046）在compile.js：10984 在Array.forEach（）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata中（compiler.js：10944）在CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata中（compiler.js：10663）在JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules （compiler.js：23876）

运行一些测试后，我注意到该错误仅在导入 Http 组件（也在app.module上声明）时发生。

我在这里想念东西吗？

events.service.ts

import { Injectable } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/storage';
import { Event } from './events.model';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Instagram } from './instagram.service';

@Injectable()

export class EventService {
    event: AngularFireList<Event[]>;
    NODE = 'events/';

    constructor(private instagram: Instagram, private db: AngularFireDatabase, private storage: AngularFireStorage) {}

    getAllPictures(tag: string) {
        this.instagram.getAllPictures(tag);
    }
}

instagram.service.ts

import { Http } from '@angular/http';
export class Instagram {
    tag: string;
    private BASE_URL = 'https://www.instagram.com/explore/tags/' + this.tag + '/?__a=1';
    constructor(public http: Http) {}

    getAllPictures(tag: string) {
        this.tag = tag;
        return this.http.get(this.BASE_URL).pipe().subscribe(
            data => {
                console.log(data);
            },
            (error) => {
                console.log(error);
            }
        );
    }

}

Answer 1

您是否将HttpModule导入了AppModule？

请记住，使用Angular 5可以使用HttpClient，因为现在Http已过时。有关更多信息，请参见：https://angular.io/guide/http。

Answer 2

您需要添加@Injectable()

访问您的Instagram服务

好锁！

Answer 3

通常，如果要注入任何内容，则必须具有@Injectable（）批注。该注释基本上标记了要跟踪的角度并将其提供给请求类的类。

仅需澄清一点（看您的评论，似乎不清楚Angular DI的工作原理）：将要注入的类需要@Injectable批注具有要求的元素的类通过在构造函数中指定@Inject（InjectableClassName）参数来实现。这些东西适用于所有班级。

但是有一个警告，这可能会使您感到困惑：已经通过任何方式“按角度”注册的类（意味着它们具有@ Injectable，@ Component，@ Pipe或@Directive批注）具有其构造函数的快捷方式：它们不需要@Inject（..）参数，但是该参数将通过指示类型和访问关键字来自动解析（就像您所做的那样，因为EventService具有@Injectable）。这只是“隐式”注入，角度将以相同的方式对其进行处理。

我认为要说这一点很重要，因为类型只是可能的“ DI令牌”之一。例如，在我的项目之一中，就有此构造函数：

    constructor(private eventService: EventService, @Inject(SERVICE_IMPLEMENTATIONS_MAP) private serviceMap: any) {}

如您所见，serviceMap的类型是任意的，但是我确实通过包含模块中提供的依赖项令牌注入了它，并且实际上我可以将任何东西传递给它（我用于不同类型的模拟和实际没有通用API的服务）。如您所见，我也将快捷方式DI用于其他服务。

请记住，@ Injectable 表示意思可以注入其构造函数。这意味着该类可以注入到其他地方。使用您的代码，我可以在某个地方编写构造函数（私有e：EventService），Angular将为我注入您的eventservice（再次注入instagram服务）。注射剂不会注入其他东西，而是会注入其他东西。

在服务未捕获的错误内注入服务

3 个答案: