Question

目前，我正在研究Angular 2.我必须演示Angular 2提供的所有功能。我正面临DI问题。依赖注入不起作用。

这是我的system.config.js

(function (global) {


var map = {

    '@angular': '/node_modules/@angular', // sufficient if we didn't pin the version
    '@service': '/scripts/app.service',
    '@component': '/scripts/app.component',
    '@angular/router': '/node_modules/@angular/router',
    '@angular/forms': '/node_modules/@angular/forms',
    'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api', // get latest
    'rxjs': '/node_modules/rxjs',
    'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    'typescript': '/node_modules/typescript/lib/typescript.js',
    //'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest
    //'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
    //'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js',
    //'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/lib/typescript.js',
};


var packages = {
    '@service': { defaultExtension: 'ts' },
    '@component': { defaultExtension: 'ts' },
    'rxjs': { defaultExtension: 'js' },
    'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
};

var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router-deprecated',
    'upgrade',
];


ngPackageNames.forEach(function (pkgName) {
    map['@angular/' + pkgName] = '/node_modules/@angular/' + pkgName;
});


ngPackageNames.forEach(function (pkgName) {


    packages['@angular/' + pkgName] = {main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'};

    // Individual files (~300 requests):
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
});


packages['@angular/router'] = {main: 'index.js', defaultExtension: 'js'};


packages['@angular/forms'] = {main: 'index.js', defaultExtension: 'js'};

var config = {

    transpiler: 'ts',
    typescriptOptions: {
        tsconfig: false
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    map: map,
    packages: packages
};

document.SYSTEMJS_CONFIG = config;})(this);

这是我的app.ts

import {Component} from "@angular/core";
import {NgModule} from "@angular/core";
import {HttpModule} from "@angular/http";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
import {BrowserModule} from "@angular/platform-browser";
//import {MyList} from "@component/list.component";
import 'rxjs/Rx';
import {ListService} from "@service/list.service";

@Component({
   selector:'app-list',
   templateUrl: 'htmls/app.list.html'
})

export class AppList {

//list = [];
//constructor(private listService: ListService) { <--- This is not working
//    //this.list = listService.GetList();
//}


// Alternate solution I found 
listService: ListService;
list = [];

  constructor() {
    this.listService = new ListService();
    this.list = this.listService.GetList();
   }
}


@NgModule({
    declarations: [AppList],
    imports: [BrowserModule, HttpModule],
    bootstrap: [AppList],
    providers: [ListService]
   })
 export class AppModule {
  }

   platformBrowserDynamic().bootstrapModule(AppModule);

有人能解释我的代码有什么问题吗？

我不想使用我上面写的备用解决方案。

Answer 1

我找到了解决方案。 system.config.js中的微小更改使用此

  transpiler: 'typescript',
  typescriptOptions: {
        emitDecoratorMetadata: true
    },

Answer 2

您忘记为您的注射服务申报提供者。将以下行添加到@Component或@NgModule装饰器：

providers:[ListService]

依赖注入问题 - Angular 2

2 个答案: