Angular2类构造函数错误:没有Number的提供程序

Question

我使用这里的开发工具包开始了一个项目:https://github.com/datatypevoid/ng2-mean-webpack.一切似乎工作得很好,除非我创建一个带有参数属性的新类(如官方的Typescript文档中所示:https://www.typescriptlang.org/docs/handbook/classes.html ),我收到错误控制台中的消息说:

ORIGINAL EXCEPTION: No provider for Number!

这是我的班级:

@Component({
  selector: 'grid-tile',
  template: require('./grid-tile.component.html'),
  styleUrls: [require('!style!css!sass!./grid-tile.component.scss')],
  providers: [],
  directives: [],
  pipes: []
})
export class GridTile extends Tile {
  constructor(private x:number, private y: number) {
    super();
  }
}

以下是我创建实例的方法:

var tile = new GridTile(3,4);
tiles.push(tile);

我非常希望在进一步开发的过程中找到解决这个问题的方法.我已经按照Angular2 Tour of Heroes教程和参数属性似乎工作正常,所以我想知道它是否与开发工具包有关或者只是我正在传递的东西..我对Angular2全新所以这可能是我的错误.谢谢您的帮助.

Answer 1

Angular 2使用MVC模式:装饰的类@Component等同于Controller.这意味着:

• 如果不使用依赖注入(这会产生错误),则无法为构造函数提供参数;

• 该类不应该被实例化,但必须在引导时或通过路由器调用,或者在Angular中通过指令将其作为子项传递.

如果你仔细分析英雄之旅,你会发现你创建了一个服务,这是一个注射类:

@Injectable()
export class HeroService {
  ...
  }
}

然后将它作为provider(在同一组件或父组件中)注入,并通过将其传递给组件的构造函数来实例化:

@Component({
  selector: 'my-app',
  ...
  providers: [HeroService]
})
export class AppComponent implements OnInit {
  ...
  constructor(private heroService: HeroService) { }
  ...
}

通过这种方式,对注入类的引用由组件和所有子组件继承.

在您的示例中,您有两个变量作为参数,并且生成错误,因为它们不对应于组件中的任何提供程序.

你可以在这里阅读更多.

或者,开始:http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2