Angular 2 NgModel 不起作用答案

【问题标题】：Angular 2 NgModel doesn't workAngular 2 NgModel 不起作用
【发布时间】：2016-01-03 15:47:23
【问题描述】：

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

import {Component} from 'angular2/core';
import {NgModel} from 'angular2/common';

@Component({
  selector: 'app',
  template: `
    <div>
    <div>Value is {{ value }}</div>
    <input type="text" [(ngModel)]="value" />
    </div>
  `,
  directives: [NgModel]
})
export class App {
  value: string;
};

<!DOCTYPE html>
<html>
  <head>
    <title>Angular2</title>
  </head>
  <body>
    <app></app>

    <script src="./js/bundle.js"></script>
  </body>
</html>

（bundle.js 只做app 组件的引导）

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

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

问候，萨伦

更新我想我可能会错误地配置我的构建系统，所以我包括我的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() {
  browserify({
    debug: true
  })
  .add('source/ts/boot.ts')
  .plugin(tsify)
  .bundle()
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({
    loadMaps: true
  }))
  .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",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular2": "^2.0.0-beta.0",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.34.0",
    "reflect-metadata": "^0.1.2",
    "rxjs": "^5.0.0-beta.0",
    "zone.js": "^0.5.10"
  },
  "devDependencies": {
    "browserify": "^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",
    "typescript": "^1.7.5",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

boot.ts

import 'reflect-metadata';
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';

bootstrap(App);

【问题讨论】：

我已经尝试过这段代码（Typescript），它工作正常。我在这里看到的唯一问题是它缺少很多角度脚本。

标签： typescript browserify angular angular-ngmodel

【解决方案1】：

问题是您导入的ngModel 无效（或不需要）将其取出，它应该可以正常运行，请参见此处：

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

【讨论】：

我在帖子中包含了我的 gulpfile 和 boot.ts。你能检查我是否做错了什么吗？
我自己不是 browserify 用户，但正如@pixelbits 指出的那样，它实际上看起来不像您的捆绑角度本身或在您的索引文件中包含 angular-polyfills.js

【解决方案2】：

在深入研究文档和长时间谷歌搜索之后，我终于找到了答案。

（这个答案将来可能会改变，请参阅 Angular 文档）

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

正如@pixelbits 提到的，我错过了几个依赖项rxjs 和angular2-polyfills，后者是另外两个依赖项zone.js 和reflect-metadata 的polyfill，它必须只包含在<script> 标记中.

我需要做的是：

从boot.ts 中删除reflect-metadata 导入并添加rxjs 导入。
将angular2-polyfills.js 的<script> 标签添加到index.html

瞧！它按预期工作。

感谢 @pixelbits、@Zyzle 和 @Günter Zöchbauer 帮助我。

【讨论】：

【解决方案3】：

你需要添加FORM_DIRECTIVES，NgModel是不够的。当我只添加 NgModel（在 Dart 中）时，我收到错误 No value accessor for '' in [AST]。 example in the code documentation 也使用 FORM_DIRECTIVES

【讨论】：

FORM_DIRECTIVES 实际上不再需要作为导入，因为有几个 alphas 回来了，CORE_DIRECTIVES 也是如此，我想还有一些人
我看到提到过几次，但如果没有FORM_DIRECTIVES，它就无法工作。也许这只是在 Dart 中。
嗯，可以。虽然在 TypeScript 中工作正常。
还是不行，而且还发生了奇怪的事情。如果我在组件的构造函数中将值设置为value，我会在文本框和div 中得到该值。但是如果我更改文本框中的值，div 中的值不会改变。奇怪。
或者我错过了构建系统中的一些依赖项？我使用gulp、browserify 和tsify 进行构建。