在服务中注入服务未被捕获的错误

Question

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

• instagram.service> event.service.ts（主服务）其中instagram是将在event.service中注入的服务。

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

我得到的错误是：

未捕获错误：无法解析Instagram的所有参数:(？）。 at syntaxError（compiler.js：1021）at CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata（compiler.js：10922）at CompileMetadataResolver.push ../ node_modules / @ angular /compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata（compiler.js：10815）at CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata（compiler.js：11037）at at编译器上的CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata（compiler.js：11046）：在CompileMetadataResolver.push ../ node_modules /的Array.forEach（）上的compiler.js：10984 @ angular / compiler / fesm5 / compiler.js.CompileMetadataResolver._getProvidersMetadata（compiler.js：10944）at CompileMetadataResolver.push ../ node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata（compiler.js：10663） ）在JitCompiler.push ../ node_modul es /@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

你需要添加@Injectable()

到您的Instagram服务

好锁！

Answer 2

你在HttpModule进口了AppModule吗？

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

Answer 3

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

只是为了澄清一下（看看你的评论似乎还不清楚Angular DI是如何工作的）：将要注入的类需要一个@Injectable注释需要注入元素的类通过指定@Inject（InjectableClassName）参数来实现在构造函数中。这些东西适用于所有课程。

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

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

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

正如你所看到的，serviceMap的类型是any，但是我确实通过我在包含模块中提供的Dependency Token注入它，我实际上可以传递任何东西（我用于不同类型的模拟和实际服务）没有共同的API）。如您所见，我也使用快捷方式DI作为其他服务。

请记住，@ Injectable doent意味着它的构造函数可以被注入。这意味着该课程可以注入其他地方。使用您的代码，我可以编写某个构造函数（私有e：EventService），Angular会向我注入您的eventservice（再次注入instagram服务）。注射剂不会将其他物质注入其中，它们会注入其他物质。