角2.0​​和NG-模型 [英] Angular 2.0 and ng-model

问题描述

我建立了约2角迁移presentation一个演示应用程序。我的应用程序的一部分，具有＆LT;输入NG模型=/＆GT; ，我想将其更改为角2的方式。
所以，我有两个选择：

1. 使用formDirectives'，这是我的演示矫枉过正，因为我没有一个形式在这里，只有一些投入更新一些数据


2. 使用什么维克多Savkin（表2角队）表现出他的（大）帖子：

＆LT;输入（[NG-模式]）=todo.text/＆GT;

在 NG-模型是一个指令：

 进口{指令，EventEmitter}从'angular2 / angular2';@指示（{
  选择：[NG模型]'，
  性质：['ngModel']，
  事件：['ngModelChanged：ngModel']，
  主持人：{
    [值]：ngModel'，
    （输入）：ngModelChanged.next（$ event.target.value）
  }
}）
出口类NgModelDirective {
  ngModel：任; //储值
  ngModelChanged：EventEmitter; //事件发射器
}
 

我实现了这个在我的演示项目是这样的：

 进口{组件，查看}从'angular2 / angular2';
进口{NgModelDirective作为NgModel}从'../ng-model/ng-model';@零件（{
  选择：字体大小分量'，
  属性：[
    字体
  ]
}）
@视图（{
  模板：`＆LT;输入ID =fontSize的阶级=表格控NAME =fontSize的（[NG-模式]）=font.fontSize/＆GT;`
  指令：
    NgModel
  ]
}）出口类FontSizeComponent {
  构造函数（）{
  }
}
 

我的输入是越来越呈现与提供的数据（属性绑定[NG-模型工作]，但该事件绑定不工作，给予以下错误：

异常：类型错误：无法读取的未定义的属性观察员

异常：类型错误：无法读取的未定义的属性位置

异常：类型错误：无法读取的未定义的属性'hostView

当我删除此行事件：['ngModelChanged：ngModel'] 从 NG-模型指令所有的错误都消失了......

我是pretty新角2（大家都可能是），并试着理解我在做什么错在这里...

修改

OK，打完<一个href=\"http://stackoverflow.com/questions/31623879/angular-2-two-way-binding-using-ng-model-is-not-working\">reading多一点我确信，使用 formDirectives 不是这样的矫枉过正。我的解决方案（采用了棱角分明2 阿尔法35 现在 FORM_DIRECTIVES 而不是 formDirectives ）：

 进口{组件，查看，FORM_DIRECTIVES}从'angular2 / angular2';@零件（{
  选择：字体大小分量'，
  属性：[
    '字体大小'
  ]
}）
@视图（{
  模板：`＆LT;输入ID =fontSize的阶级=表格控NAME =fontSize的[（NG-模式）] =fontSize的/＆GT;`
  指令：
    FORM_DIRECTIVES
  ]
}）出口类FontSizeComponent {
  构造函数（）{  }
}
 




解决方案

您必须初始化事件事件发射器为你的指令。你可以做到这一点无论是在控制器：

进口{EventEmitter，指令}的'angular2 / angular2';@指示（{
    选择：[NG模型]'，
    性质：['ngModel']，
    事件：['ngModelChanged：ngModel']，
    主持人：{
        [值]：ngModel'，
        （输入）：ngModelChanged.next（$ event.target.value）
    }
}）
出口类NgModelDirective {
    ngModel：任; //储值
    ngModelChanged：EventEmitter; //事件发射器    构造函数（）{
        this.newModelChanged =新EventEmitter（）; //＆LT; ==初始化
    }
}


或者，如果您使用的是打字稿，在你的属性定义：

  // ...
出口类NgModelDirective {
    ngModel：任; //储值
    ngModelChanged =新EventEmitter（）; //＆LT; ==初始化
}
 

I am building a demo application for a presentation about Angular 2 migration. Part of my app has <input ng-model="" /> and I want to change it to the "Angular 2's way". So, I have two options:

1. Use the 'formDirectives', which is an overkill for my demo, since I do not have a form here, only some inputs updating some data
2. Use what Victor Savkin (form Angular 2 team) showed in his (great) post:

<input ([ng-model])="todo.text" />

When ng-model is a directive:

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
}

I've implemented this on my demo project like this:

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

My input is getting rendered with the supplied data (the attribute binding [ng-model is working], but the event-binding is not working, giving the following errors:

EXCEPTION: TypeError: Cannot read property 'observer' of undefined

EXCEPTION: TypeError: Cannot read property 'location' of undefined

EXCEPTION: TypeError: Cannot read property 'hostView' of undefined

When I remove the this line events: ['ngModelChanged: ngModel'], from ng-model directive all errors disappears...

I am pretty new to Angular 2 (as we all probably are) and try to understand what am I doing wrong here...

EDIT

OK, so after reading a little more I was convinced that using formDirectives is not such an overkill. My solution is (Using Angular 2 Alpha 35 is now FORM_DIRECTIVES instead of formDirectives):

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() {

  }
}

解决方案

You must initialize events event emitters for your directive. You can do it either in the controller:

import { EventEmitter, Directive } 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

    constructor() {
        this.newModelChanged = new EventEmitter(); // <== INITIALIZATION
    }
}

Or, if you are using TypeScript, in your properties definition:

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

这篇关于角2.0​​和NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！