Angular 5：如何在ES6/ES5环境（无TypeScript）中注入Router服务

我希望在ES6/ES5环境（不使用TypeScript）下，将Angular Router服务注入到组件中。

大家好，

我最近为JavaScript创建了一个Angular 5代理库，因为我不想使用TypeScript。该库可用于创建Component、Injectable服务和NgModule，且运行正常。

下面是一个可运行的示例代码：

// ng变量包含Angular 5库中的{ compiler, common, core, router, platformBrowserDynamic, platformBrowser }
class Service {
 constructor() {}
 toUpperCase(string) {
 return String(string).toUpperCase();
 }
}
// 类似@Injectable
Injectable({})(Service);
class HomeComponent {
 constructor(service) {
 this.message = service.toUpperCase('hello');
 }
}
// 类似@Component
Component({
 selector: 'home-component',
 providers: [Service],
 template: `
 <h1>{{ message }}</h1>
 `
})(HomeComponent);
class Module {
 constructor() {}
}
// 类似@NgModule
NgModule({
 imports: [ng.platformBrowser.BrowserModule],
 declarations: [HomeComponent],
 providers: [],
 bootstrap: [HomeComponent]
})(Module);
ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);

上述代码可实现自定义Injectable服务的创建及其向组件的注入。

问题描述 #

当我尝试注入Router这类Angular内置服务时，会触发Angular注入器错误：

Error: Can't resolve all parameters for Router: (?, ?, ?, ?, ?, ?, ?, ?).

对应的错误演示代码如下：

// ng变量包含Angular 5库中的{ compiler, common, core, router, platformBrowserDynamic, platformBrowser }
class Service {
 constructor() {}
 toUpperCase(string) {
 return String(string).toUpperCase();
 }
}
// 类似@Injectable
Injectable({})(Service);
class HomeComponent {
 constructor(service, router) {
 this.message = service.toUpperCase('hello');
 }
}
// 类似@Component
Component({
 selector: 'home-component',
 providers: [Service, ng.router.Router],
 template: `
 <h1>{{ message }}</h1>
 `
})(HomeComponent);
class Module {
 constructor() {}
}
// 类似@NgModule
NgModule({
 imports: [
 ng.platformBrowser.BrowserModule,
 ng.router.RouterModule
 ],
 declarations: [HomeComponent],
 providers: [],
 bootstrap: [HomeComponent]
})(Module);
ng.platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(Module);

注入Angular内置服务的方式是否与自定义Injectable服务不同？我的NgModule装饰器代码如下：

function NgModule(metadata = {}) {
 return function decorator(target) {
 target.annotations = [new core.NgModule(metadata)];
 target.parameters = [];
 if (!!metadata.providers && Array.isArray(metadata.providers)) {
 metadata.providers.forEach(provider => {
 if (!provider.useValue && !provider.useClass) {
 // 示例中的Service类
 target.parameters.push([new core.Inject(provider)]);
 } else {
 // 类似{ provide: LOCALE_ID, useValue: 'en-EN' }的提供者
 target.parameters.push([new core.Inject(provider.provide), provider.useValue || provider.useClass]);
 }
 });
 }
 return target;
 }
}

感谢阅读，欢迎提供任何思路。

补充说明 我的问题与Angular 2 dependency injection in ES5 and ES6不同。因为Angular 4和5之间的依赖注入机制存在差异。

内容的提问来源于stack exchange，提问作者Kevin Balicot