依賴注入問題 - 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

回答

相關問題