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