Angular 2中的依赖注入或构造函数

Question

The following site is plunker what I am working on. 以下网站是我正在努力的工作。

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

In the app/app.component.ts, if I remove the constructor(private service : ConceptService) { }, the label of the button appears well. 在app / app.component.ts中，如果我删除构造函数（私有服务：ConceptService）{}，则按钮的标签会很好地显示。 However, if I leave that constructor, the button disappears, which means I think there is something wrong in that constructor. 但是，如果我离开该构造函数，该按钮将消失，这意味着我认为该构造函数有问题。 If someone knows about this problem, could you give some clues? 如果有人知道这个问题，您能提供一些线索吗？ I really appreciate all your comments. 我非常感谢您的所有评论。 Thank you so much. 非常感谢。

index.html 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 app / boot.ts

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

bootstrap(AppComponent);

app/app.component.ts app / 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) {

  //}

}

app/service/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

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

Issues : 1. Conceptservice must be included in the providers arrays when bootstrap appcomponent. 问题：1.引导appcomponent时，conceptservice必须包含在provider数组中。 2. Use https test json urls in plunkr. 2.在plunkr中使用https test json url。

Angular 2中的依赖注入或构造函数

问题描述

1 个解决方案

解决方案1
0 2016-11-04 19:25:08

Angular 2中的依赖注入或构造函数

问题描述

1 个解决方案

解决方案1 0 2016-11-04 19:25:08

解决方案1
0 2016-11-04 19:25:08