Angular 2 NgModel 不起作用 [英] Angular 2 NgModel doesn't work

问题描述

我开始从 Angular 1 过渡到 Angular 2.我尝试先做一些简单的事情，所以我写了一个组件:

import {Component} from 'angular2/core';从'angular2/common'导入{NgModel}；@成分({选择器:'应用'，模板:`<div><div>值是{{值}}</div><input type="text" [(ngModel)]="value"/>

`，指令:[NgModel]})出口类应用{值:字符串；};

<头><title>Angular2</title><身体><app></app><script src="./js/bundle.js"></script></html>

(bundle.js 只做 app 组件的引导)

我希望在文本框中输入内容后，我应该在 div 中得到相同的文本.但它不会发生.

为什么我的代码不起作用?

问候，萨伦

UPDATE 我假设我可能错误地配置了我的构建系统，所以我包含了我的 gulpfile.js、package.json 和 boot.ts.

gulpfile.js

var gulp = require('gulp');var browserify = require('browserify');var tsify = require('tsify');var source = require('vinyl-source-stream');var uglify = require('gulp-uglify');var buffer = require('vinyl-buffer');var sourcemaps = require('gulp-sourcemaps');gulp.task('ts', function() {浏览器化({调试:真}).add('source/ts/boot.ts').plugin(tsify).捆().pipe(source('bundle.js')).pipe(buffer()).pipe(sourcemaps.init({加载地图:真})).pipe(uglify()).pipe(sourcemaps.write()).pipe(gulp.dest('build/js'));});gulp.task('watch', function() {gulp.watch('source/ts/**/*.ts', ['ts']);});

package.json

<代码>{"name": "hello-angular2","版本": "1.0.0",描述": ""，"main": "index.js",脚本":{"test": "echo \"Error: no test specified\" && exit 1"},作者": ""，"license": "ISC",依赖关系":{"angular2": "^2.0.0-beta.0","es6-promise": "^3.0.2","es6-shim": "^0.34.0",反射元数据":^0.1.2"，"rxjs": "^5.0.0-beta.0",zone.js":^0.5.10"},开发依赖":{"浏览": "^12.0.1","gulp": "^3.9.0","gulp-exec": "^2.1.2","gulp-live-server": "0.0.29","gulp-sourcemaps": "^1.6.0","gulp-uglify": "^1.5.1","gulp-watch": "^4.3.5","lite-server": "^1.3.2","tsify": "^0.13.1","打字稿": "^1.7.5","乙烯基缓冲液": "^1.0.0","vinyl-source-stream": "^1.1.0"}}

boot.ts

import 'reflect-metadata';从 'angular2/platform/browser' 导入 {bootstrap}；从'./app'导入{App}；引导程序(应用程序)；

解决方案

经过长时间的文档挖掘和长时间的谷歌搜索，我终于找到了答案.

(此答案将来可能会更改，请参阅 Angular 文档)

https://github.com/angular/angular/blob/master/modules/angular2/docs/bundles/overview.md

正如@pixelbits 提到的，我错过了几个依赖项 rxjs 和 angular2-polyfills，后者是另外两个依赖项 zone.js 和 reflect-metadata 并且这必须仅包含在