Question

以下网站是我正在研究的内容。

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

在app / 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()); 
  }

}

Answer 1

工作代码： https://embed.plnkr.co/v1uyAJ/

问题： 1.概念服务必须包含在提供者数组中 bootstrap appcomponent。 2.在plunkr中使用https test json urls。

角度2

1 个答案: