Javascript Angular 2.0和ng模型

我正在为Angular 2迁移演示构建一个演示应用程序。我的部分应用程序有

，我想把它改成“Angular 2's way”。 因此，我有两个选择：

使用“formDirectives”，这对于我的演示来说是一种过度使用，因为我这里没有表单，只有一些输入更新了一些数据

使用Victor Savkin（第二组）在他的（伟大的）作品中所展示的：

当ng型号为指令时：

import {Directive, EventEmitter} from 'angular2/angular2';

@Directive({
  selector: '[ng-model]',
  properties: ['ngModel'],
  events: ['ngModelChanged: ngModel'],
  host: {
    "[value]": 'ngModel',
    "(input)": "ngModelChanged.next($event.target.value)"
  }
})
export class NgModelDirective {
  ngModel: any; // stored value
  ngModelChanged: EventEmitter; // an event emitter
}

我已经在我的演示项目上实现了如下：

import {Component, View} from 'angular2/angular2';
import {NgModelDirective as NgModel} from '../ng-model/ng-model';

@Component({
  selector: 'font-size-component',
  properties: [
    'font'
  ]
})
@View({
  template: `<input id="fontSize" class="form-control" name="fontSize" ([ng-model])="font.fontSize"/>`,
  directives: [
    NgModel
  ]
})

export class FontSizeComponent {
  constructor() {
  }
}

---

您必须为指令初始化

事件

事件发射器。您可以在控制器中执行以下操作：

从'angular2/angular2'导入{EventEmitter，Directive}；
@指示({
选择器：“[ng模型]”，
属性：['ngModel']，
事件：['ngModelChanged:ngModel']，
主持人:{
“[value]”：“ngModel”，
“（输入）”：“ngModelChanged.next（$event.target.value）”
}
})
导出类指令{
ngModel:any；//存储值
ngModelChanged:EventEmitter；//事件发射器
构造函数（）{
this.newModelChanged=new EventEmitter（）；//实际上，Victor Savkin博客中的文章只是一个如何实现ng模型的示例，angular2表单附带了一个包含在FORM_指令中的实现。看起来最后一次编辑还可以，这是AFIK中角度最大的一种方式。有什么事情没有按预期工作吗？
import {Component, View, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
  selector: 'font-size-component',
  properties: [
    'fontSize'
  ]
})
@View({
  template: `<input id="fontSize" class="form-control" name="fontSize" [(ng-model)]="fontSize"/>`,
  directives: [
    FORM_DIRECTIVES
  ]
})

export class FontSizeComponent {
  constructor() {

  }
}

// ...
export class NgModelDirective {
    ngModel: any; // stored value
    ngModelChanged = new EventEmitter(); // <== INITIALIZATION
}