2016-11-03 5 views
0

次のサイトは、私が取り組んでいるものです。アプリ/ app.component.tsで角度2の従属注入またはコンストラクタ

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

私は(プライベートサービス: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> 

APP/boot.ts

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

bootstrap(AppComponent); 

APP/

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

をapp.component.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()); 
    } 

} 

答えて

0

ワーキングコード: https://embed.plnkr.co/v1uyAJ/

問題: ブートストラップappcomponent 1. Conceptserviceは、プロバイダアレイに含まれている必要があります。 2. plunkrでhttps test json urlsを使用します。

関連する問題