Question

当我在组件中注入服务时，我得到了上面提到的错误。当我从组件装饰器中删除providers属性时，它就会运行。以下是我的代码片段

ManufactureComponent.ts

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

import { BaseLayoutComponent } from '../../shared/index';
import { ManufacturerService } from '../index'

@Component({
  moduleId: module.id,
  templateUrl: 'manufacturers.component.html',
  directives: [ROUTER_DIRECTIVES, BaseLayoutComponent]
})
export class ManufacturerComponent implements OnInit {

  constructor() {}

  ngOnInit() {
  }

}

ManufacturerListComponent.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { ManufacturerService, IManufacturer } from '../index';
import { PageContainerComponent } from '../../shared/index';

@Component({
  moduleId: module.id,
  templateUrl: 'manufacturer-list.component.html',
  directives: [ROUTER_DIRECTIVES, PageContainerComponent],
  providers: [ManufacturerService]
})
export class ManufacturerListComponent implements OnInit {
 manufacturers: IManufacturer[];

 constructor(private manufacturerService: ManufacturerService) { }

 ngOnInit() { 
   this.getManufacturers();
 }

 getManufacturers() {
   this.manufacturerService.all()
     .subscribe(response => {this.manufacturers = response;}, 
     (error) =>  {console.log(error);})
}

}

ManufacturerService.ts

import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/observable';
import { AuthHttp } from 'angular2-jwt';

import { Config } from '../../shared/index';
import { IManufacturer } from '../index';

@Injectable()
export class ManufacturerService {
  private baseUrl = `${Config.endpoint}/api/manufacturers`;

  constructor(private authHttp: AuthHttp) { }

  all(): Observable<IManufacturer[]> {
    return this.authHttp.get(this.baseUrl)
      .map(res => res.json());
  }

}

`

我还确保正确导入依赖项。

由于

Answer 1

您需要在根组件（或AuthHttp）提供bootstrap()

Answer 2

进行进一步的调试，我发现它必须与ManufacturerService以及它如何导入ManufacturerListComponent。直接导入对我有用。

Answer 3

如果你的相互依赖的组件位于一个index.ts文件......

TypeError：无法读取未定义的属性“参数”

3 个答案: