尝试将服务注入 Angular 组件时出错“异常:无法解析组件的所有参数"，为什么? [英] Error when trying to inject a service into an angular component "EXCEPTION: Can't resolve all parameters for component", why?

问题描述

我已经在 Angular 中构建了一个基本的应用程序，但是我遇到了一个奇怪的问题，我无法将服务注入到我的一个组件中.然而，它可以很好地注入我创建的其他三个组件中的任何一个.

I've built a basic app in Angular, but I have encountered a strange issue where I cannot inject a service into one of my components. It injects fine into any of the three other components I have created, however.

首先，这是服务:

import { Injectable } from '@angular/core';

@Injectable()
export class MobileService {
  screenWidth: number;
  screenHeight: number;

  constructor() {
    this.screenWidth = window.outerWidth;
    this.screenHeight = window.outerHeight;

    window.addEventListener("resize", this.onWindowResize.bind(this) )
  }
  
  onWindowResize(ev: Event) {
    var win = (ev.currentTarget as Window);
    this.screenWidth = win.outerWidth;
    this.screenHeight = win.outerHeight;
  }
  
}

以及它拒绝使用的组件:

And the component that it refuses to work with:

import { Component, } from '@angular/core';
import { NgClass } from '@angular/common';
import { ROUTER_DIRECTIVES } from '@angular/router';

import {MobileService} from '../';

@Component({
  moduleId: module.id,
  selector: 'pm-header',
  templateUrl: 'header.component.html',
  styleUrls: ['header.component.css'],
  directives: [ROUTER_DIRECTIVES, NgClass],
})
export class HeaderComponent {
  mobileNav: boolean = false;

  constructor(public ms: MobileService) {
    console.log(ms);
  }

}

我在浏览器控制台中得到的错误是:

The error I get in the browser console is this:

例外:无法解析 HeaderComponent 的所有参数:(?).

EXCEPTION: Can't resolve all parameters for HeaderComponent: (?).

我在 bootstrap 函数中有服务，所以它有一个提供者.而且我似乎可以毫无问题地将它注入到我的任何其他组件的构造函数中.

I have the service in the bootstrap function so it has a provider. And I seem to be able to inject it into the constructor of any of my other components without issue.

推荐答案

我也遇到过这种情况，将服务 A 注入服务 B，反之亦然.

I also encountered this by injecting service A into service B and vice versa.

我认为这很快失败是一件好事，因为无论如何应该避免它.如果您希望您的服务更加模块化和可重用，最好尽可能避免循环引用.这篇帖子强调了围绕它的陷阱.

I think it's a good thing that this fails fast as it should probably be avoided anyway. If you want your services to be more modular and re-usable, it's best to avoid circular references as much as possible. This post highlights the pitfalls surrounding that.

因此，我有以下建议:

• 如果您觉得课程交互过于频繁(我指的是 功能羡慕)，您可能需要考虑将 2 个服务合并为 1 个类.
• 如果上述方法对您不起作用，请考虑使用 第三个服务(EventService)，这两个服务都可以注入以交换消息.莉>

• If you feel the classes are interacting too often (I'm talking about feature envy), you might want to consider merging the 2 services into 1 class.
• If the above doesn't work for you, consider using a 3rd service, (an EventService) which both services can inject in order to exchange messages.

这篇关于尝试将服务注入 Angular 组件时出错“异常:无法解析组件的所有参数"，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！