Angular 2入门：尝试使用NgModel[适用于rc.5版本]

1 年 ago

文, 翔

2 minutes

你好。我是今井。
听说Angular2即将稳定下来，我打算试试看。

当我第一次接触Angular JS时，最令我印象深刻的是它的双向绑定功能。我很想看看在Angular 2中这个双向绑定是如何改变的。

前提 (Qian2 ti2)

公式サイト: https://angular.io/

准备好

基本的环境和配置与“npm i然后编写Angular 2的Hello World!”相同，但为了使用NgModel，需要加载FormsModule。由于FormsModule位于@angular/forms中，可以使用npm引入它。

npm i --save @angular/forms

此外，在app.module.ts中添加FormsModule模块。

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {AppComponent} from "./app.component";
import {FormsModule} from "@angular/forms"; // 追加

@NgModule({
  imports: [
    BrowserModule,
    FormsModule // 追加
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

从模型到视图

让我们尝试从MVC模型中的模型反映值到视图。

// Componentを作成するため、`@angular/core`から`Component`をimportしてます。
import {Component} from "@angular/core";

// `@Component`という見慣れない書き方をしていますが、これはTypescriptが採用しているDecorator構文です。
// 今ではES7の仕様としても検討されています。(20160818時点でstage2)
// このDecoartor構文により、`AppComponent`クラスに`selector`、`template`のメタデータを付与することができます。
@Component({
  selector: "my-app",
  template: `
    <h1>{{title}}</h1>
    <input type='text' [value]="title">
  `
})
export class AppComponent {
  title: string = "Hello World";
}

通过将[value]=”title”添加到组件类 AppComponent 中声明的 title=”HelloWorld”，可以将其反映到 input 元素的 value 属性中。可以使用[target]=”expression”、bind-target=”expression”或target={{expression}}这样的语法将任意的属性、属性、样式和类与值进行绑定。[…] 这种表示法表示输入属性。

从视图到模型。

我将尝试从MVC模型中的视图将值反映到模型中。

import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <h1>{{title}}</h1>
    <input type='text' (input)="title=$event.target.value">
  `
})
export class AppComponent {
  title: string = "";
}

（输入）=“title = $ event.target.value”是用来描述的，当用户输入触发输入事件时，将的值反映到title中。可以使用(event name)=”expression”或on-event name=”expression”的语法来绑定事件。(…)表示输出属性。

双向绑定（从模型到视图，从视图到模型）

这一次，我们将尝试实现从模型到视图，从视图到模型的转换。

有些复杂的写法 de

import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <h1>{{title}}</h1>
    <input type='text' [value]="title" (input)="title=$event.target.value">
  `
})
export class AppComponent {
  title: string = "Hello World";
}

想要实现双向绑定，只需直接写[value]（输入）就可以了。但是，这样写有点麻烦。在Angular JS中，我想你可能使用了ng-model这个指令，而在Angular 2中，存在着一个名为NgModel的指令。使用它，我们可以更简洁地编写。

简便的写法

好的，开始讨论正题。我们将使用NgModel来实现双向绑定。

import {Component} from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <h1>{{title}}</h1>
    <input type='text' [(ngModel)]="title">
  `
})
export class AppComponent {
  title: string = "Hello World";
}

这样使用双向绑定就更加简单了。[(…)]的记法非常特殊。在官方网站上，这种记法被称为“香蕉在盒子里”。（确实像是香蕉装在盒子里一样…）

基于前述讨论，我们可以理解这意味着实现了输入和输出两方面的功能。

顺带一提，也可以写成[(ngModel)]=”title” <=> [ngModel]=”title” (ngModelChange)=”title=$event” <=> bindon-value=”title”。这显示出了同时存在输入和输出方法，说明关注了数据绑定的方向。

最后

ここらへんで()[]bind-on-などをパースしていますね。ソースを見ると理解が深まります。

[ngModel]を[ng-model]や[NgModel]と書いてもエラーが出て止まっちゃうので気をつけてください。
今回のソースはGitHubにあげておきます。