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

Question

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

instagram.service > event.service.ts（主要服务）其中 instagram 是要在 event.service.

我已经在 app.module.

中声明了 instagram.service.ts

我得到的错误是：

Uncaught Error: Can't resolve all parameters for 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 CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:11046) at compiler.js:10984 at Array.forEach () at CompileMetadataResolver.push../node_modules/@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) at 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

您是否在 AppModule 中导入了 HttpModule？

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

Answer 2

您需要添加@Injectable()

您的 Instagram 服务

好锁！

Answer 3

一般来说，如果你想注入任何东西，它必须有@Injectable()注解。该注释基本上为 angular 标记 class 以跟踪并提供给请求 classes.

澄清一下（看你的评论似乎不清楚 Angular DI 是如何工作的）：类将被注入需要一个@Injectable 注释类需要注入元素，方法是在构造函数中指定 @Inject(InjectableClassName) 参数。这些东西适用于所有 classes.

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

我认为这样说很重要，因为类型只是可能的一种 "DI tokens"。例如，我在我的一个项目中有这个构造函数：

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

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

记住，@Injectable doent 意味着 它的构造函数可以被注入。这意味着 class 可以注入到别处。使用您的代码，我可以在某个地方编写构造函数（private e：EventService）并且 Angular 将向我注入您的事件服务（再次注入 instagram 服务）。 Injectables 不会被注入其他东西，它们确实会被注入其他东西。

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

Injecting a service inside a service uncaught error

typescript

angular-services

angular