2016-11-03 112 views
0

以下網站是我正在處理的內容。依賴注入或角2中的構造函數

https://plnkr.co/edit/xrba33IDR6c9YpA3V8eK?p=preview

在應用程序/ app.component.ts,如果刪除構造(私人服務:ConceptService){},按鈕的標籤出現良好。但是,如果我離開構造函數,該按鈕就會消失,這意味着我認爲構造函數中有錯誤。如果有人知道這個問題,你能否提供一些線索?我非常感謝你的評論。非常感謝。

的index.html

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Angular 2 QuickStart</title> 
     <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script> 
     <script src="https://code.angularjs.org/tools/system.js"></script> 
     <script src="https://code.angularjs.org/tools/typescript.js"></script> 
     <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script> 
     <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js">  </script> 
    <script> 
    System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': {defaultExtension: 'ts'}} 
     }); 
      System.import('app/boot') 
      .then(null, console.error.bind(console)); 
     </script> 
     </head> 
     <body> 
     <my-app>Loading...</my-app> 
     </body> 
    </html> 

應用程序/ boot.ts

import {bootstrap} from 'angular2/platform/browser' 
import {AppComponent} from './app.component' 

bootstrap(AppComponent); 

應用程序/ app.component.ts

import {Component} from 'angular2/core'; 
import {Component} from 'angular2/router'; 
import {ConceptService} from './service/concept'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <button>smile</button> 
    ` 
}) 

export class AppComponent { 

    name:string; 

    //constructor(private service : ConceptService) { 

    //} 

} 

應用程序/服務/ concept.ts

import { Injectable } from 'angular2/core'; 
import { Http }   from 'angular2/http'; 
import 'rxJs/Rx'; 

@Injectable() 
export class ConceptService { 

    constructor(private http: Http) { 
    this.http = http; 
    console.log('ConceptService constructor'); 
    } 

    getConcept() { 
    return this.http.get('http://date.jsontest.com') 
    .map(res => res.json()); 
    } 

} 

回答

相關問題