带有参数的依赖注入构造函数:“路由配置”初始错误中的组件

Question

我有这样的app.component.ts：

import { RouteConfig, Router } from '@angular/router-deprecated';
@RouteConfig([
  {
    path: '/meter', name: 'Meter', component: Meter
  }
])

app.tpl.html像这样：

<main>
  <router-outlet></router-outlet>
</main>

Meter组件如下所示：

import { Device } from './device.model';
@Component({
  selector: 'meter',
  providers: [Device],
  template: require('./meter.tpl.html')
})
export class Meter {
  constructor(
    public devices: Device
  ) {
  }
}

Device模型是这样的：

import { Injectable } from '@angular/core';
@Injectable()
export class Device {    
  constructor(
    public deviceSerialNr: string
  ) {
      console.log('Device created');
  }
}

当我运行该应用程序时，我收到错误：

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: No provider for String!
ORIGINAL STACKTRACE:
Error: DI Exception

但是如果我将属性public xx: XXX从constructor参数移动到类根，那就没问题了。

---------------更新--------------

我不应该在角度组件构造函数中将 Device 类作为参数注入。只需从设备类中删除@Injectable，并从 Meter 的构造函数中删除公共设备贴花。

Answer 1

问题就在这里，

@Injectable()
export class Device {    
  constructor(
    public deviceSerialNr: string  <------problem area
  ) {
      console.log('Device created');
  }
}

相反，你应该写，

@Injectable()
    export class Device {   
     public deviceSerialNr: string;   <------look here
      constructor() {
          console.log('Device created');
      }
  }

或

@Injectable()
    export class Device {     
      constructor() {
          this.deviceSerialNr="someValue";     <------look here
          console.log('Device created');
      }
}