依赖注入问题 - Angular 2

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

这里是我的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/[email protected]/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/[email protected]', 
    //'ts': 'https://npmcdn.com/[email protected]/lib/plugin.js', 
    //'typescript': 'https://npmcdn.com/[email protected]/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);

谁能解释一下什么是错我的代码？

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

来源

2016-09-14 Parshwa Shah

什么“不工作意味着什么”？ –

我收到此错误。 “错误：错误：无法解析AppList的所有参数：（？）。（...）” –

您必须更改“AppModule”和“AppList”组件的顺序。将'AppModule'的定义放在'appList'上面'app.ts' – ranakrunal9

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

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

来源

2016-09-14 09:39:15

您忘记宣布注射服务的提供商。以下行添加到任何@Component或@NgModule装饰：

providers:[ListService]

来源

2016-09-14 09:04:38

我已经在@NgModule装饰器中声明过。 –

依赖注入问题 - Angular 2

回答

相关问题