Angular2 RC.1 Injections

Question

我现在正在学习Angular2，问题是每当我找到一个好的教程时，它就会改变(它不适合最新的Angular2版本)。

不管怎样，我正在尝试将服务从一个文件注入到另一个文件，但不能重复教程中的家伙所做的。

以下是教程的链接：https://egghead.io/lessons/angular-2-injecting-a-service

/main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component} from "@angular/core";
import {TodoInput} from './todo-input';
import {TodoService} from "./todo-service";
@Component({
selector: 'my-app',
directives: [TodoInput],
template: '<div><todo-input></todo-input></div>'
})
class App{}
bootstrap(App, [TodoService]);

/todo服务.ts

import {Injectable} from "@angular/core";
@Injectable()
export class TodoService {
todos:string[] = [];
}

/todo输入.ts

import {Component} from "@angular/core";
import {TodoService} from "./todo-service";
@Component({
selector: 'todo-input',
template: `<div>
I'm a todo input
<input type="text" #myInput>
<button (mouseover)="onClick($event, myInput.value)">Click me</button>
</div>`
})
export class TodoInput{
constructor(todoService:TodoService) {
console.log(todoService);
}
onClick(event, value) {
console.log(event, value);
}
}

我把它放在控制台里：

异常：类型错误：无法读取null的属性"query"平台浏览器.umd.js:962异常：类型错误：无法读取属性nullBrowserDomAdapter.logError的"query"@平台浏览器.umd.js:962BrowserDomAdapter.logGroup@平台浏览器.umd.js:[e-mail]:3696(匿名函数)@core.umd.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:216(匿名函数)@zone.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:426平台浏览器.umd.js:971异常：错误：未捕获(inpromise)：TypeError:无法读取null的属性"query"平台浏览器.umd.js:962异常：错误：未捕获(承诺中)：TypeError:无法读取的属性"query"nullBrowserDomAdapter.logError@平台浏览器.umd.js:962BrowserDomAdapter.logGroup@平台浏览器.umd.js:[e-mail]:3696(匿名函数)@core.umd.js:[e-mail]:[e-mail]:240SafeSubscriber.next@订阅服务器.ts:192订阅服务器.next@订阅服务器.ts:133订阅服务器.next@订阅服务器.ts:[e-mail]:[e-mail]:[e-mail]:[e-mail]:55996NgZone_zoneImpl.NgZoneImpl.on错误@core.umd.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:426平台浏览器.umd.js:962STACKTRACE:BrowserDomAdapter.logError@平台浏览器.umd.js:[e-mail]:3698(匿名函数)@core.umd.js:[e-mail]:[e-mail]:240SafeSubscriber.next@订阅服务器.ts:192订阅服务器.next@订阅服务器.ts:133订阅服务器.next@订阅服务器.ts:[e-mail]:[e-mail]:[e-mail]:[e-mail]:55996NgZone_zoneImpl.NgZoneImpl.on错误@core.umd.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:426平台浏览器.umd.js:962错误：未捕获(承诺中)：类型错误：无法读取null的属性"query"在resolvePromise(zone.js:538)在PromiseCompleter.reject(zone.js:515)在eval(core.umd.js:8981)在ZoneDelegate.invoke(zone.js:323)位于Object.NgZoneImpl.inner.work.onVoke(core.umd.js:6075)在ZoneDelegate.invoke(zone.js:322)在Zone.run(Zone.js:216)在zone.js:571位于ZoneDelegate.invokeTask(zone.js:356)位于Object.NgZoneImpl.inner.work.onInvokeTask(core.umd.js:6066)BrowserDomAdapter.logError@平台浏览器.umd.js:[e-mail]:3699(匿名函数)@core.umd.js:[e-mail]:[e-mail]:240SafeSubscriber.next@订阅服务器.ts:192订阅服务器.next@订阅服务器.ts:133订阅服务器.next@订阅服务器.ts:[e-mail]:[e-mail]:[e-mail]:[e-mail]:55996NgZone_zoneImpl.NgZoneImpl.on错误@core.umd.js:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:[e-mail]:426 zone.js:461未处理的承诺拒绝：无法读取null的属性"query"；区域：有角度；任务：Promise.then；值：TypeError:无法读取的属性"query"null(…)[e-mail]:[e-mail]:[e-mail]:[e-mail]:426 zone.js:463错误：未捕获(承诺中)：类型错误：无法读取null(…)consoleError的属性"query"@zone.js:[e-mail]:[e-mail]:[e-mail]:426

但变化很小，它开始工作：

/todo输入.ts

import {Component} from "@angular/core";
import {TodoService} from "./todo-service";
@Component({
selector: 'todo-input',
template: `<div>
I'm a todo input
<input type="text" #myInput>
<button (mouseover)="onClick($event, myInput.value)">Click me</button>
</div>`
})
export class TodoInput{
constructor() {
console.log(TodoService);
}
onClick(event, value) {
console.log(event, value);
}
}

并且我在控制台中有正常对象(没有任何错误)

SystemJS配置

<script>
(function(global) {
// map tells the System loader where to look for things
var map = {
'app':                        'app', // 'dist',
'@angular':                   '@angular',
'angular2-in-memory-web-api': 'angular2-in-memory-web-api',
'rxjs':                       'rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app':                        { main: 'main.js',  defaultExtension: 'js' },
'rxjs':                       { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
};
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
baseURL: '{!! url('public/admin/js') !!}',
map: map,
packages: packages
}
System.config(config);
})(this);
System.import('app').catch(function(err){ console.error(err); });
</script>

所以我的问题是：为什么我不能像教程中那样从构造函数参数调用该服务？或者如何做到这一点？我是不是错过了什么？教程似乎真的很好，可以给我很好的Angular2基础知识，但当你坚持做这样简单的事情时，它是很难学习的。

非常感谢！Tom

Answer 1

对其进行排序。PHPStorm附带的TypeScript编译器导致了这些问题。我已经设置了tsconfig.json文件，并通过npm-tsc运行它，现在一切正常。

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./public/admin/js/app"
},
"exclude": [
"node_modules",
"build",
"vendor",
"public"
]
}

只是我仍然不确定如何从日志中消除这些编译错误，这些错误似乎来自排除文件夹。

干杯！