翻译完了toh-pt1的新增内容

This commit is contained in:
Zhicheng Wang 2017-04-16 21:22:10 +08:00
parent c53cad729f
commit 4c3547f73a
1 changed files with 28 additions and 0 deletions

View File

@ -167,11 +167,21 @@ code-example(language="sh" class="code-shell").
The textbox should both _display_ the hero's `name` property
and _update_ that property as the user types.
用户应该能在一个`<input>`输入框中编辑英雄的名字。
当用户输入时,这个输入框应该能同时*显示*和*修改*英雄的`name`属性。
You need a two-way binding between the `<input>` form element and the `hero.name` property.
也就是说,我们要在表单元素`<input>`和组件的`hero.name`属性之间建立双向绑定。
### Two-way binding
### 双向绑定
Refactor the hero name in the template so it looks like this:
把模板中的英雄名字重构成这样:
+makeExample('toh-1/ts/app/app.component.1.ts', 'name-input')(format='.')
:marked
@ -180,21 +190,39 @@ code-example(language="sh" class="code-shell").
Data flows _in both directions:_ from the property to the textbox,
and from the textbox back to the property.
`[(ngModel)]`是一个Angular语法用与把`hero.name`绑定到输入框中。
它的数据流是*双向的*:从属性到输入框,并且从输入框回到属性。
Unfortunately, immediately after this change, the application breaks.
If you looked in the browser console, you'd see Angular complaining that
"`ngModel` ... isn't a known property of `input`."
不幸的是,做了这项改动之后,我们的程序崩溃了。
打开浏览器的控制台我们会看到Angular抱怨说"`ngModel` ... isn't a known property of `input`."`ngModel`不是`input`元素的已知属性)
Although `NgModel` is a valid Angular directive, it isn't available by default.
It belongs to the optional `FormsModule`.
You must opt-in to using that module.
虽然`NgModel`是一个有效的Angular指令但它默认情况下却是不可用的。
它属于一个可选模块`FormsModule`。
我们必须选择使用那个模块。
### Import the _FormsModule_
### 导入 _FormsModule_
Open the `app.module.ts` file and import the `FormsModule` symbol from the `@angular/forms` library.
Then add the `FormsModule` to the `@NgModule` metadata's `imports` array, which contains the list
of external modules that the app uses.
打开`app.module.ts`文件,并且从`@angular/forms`库中导入符号`FormsModule`。
然后把`FormsModule`添加到`@NgModule`元数据的`imports`数组中,它是当前应用正在使用的外部模块列表。
The updated `AppModule` looks like this:
修改后的`AppModule`是这样的:
+makeExample('toh-1/ts/src/app/app.module.ts', '', 'app.module.ts (FormsModule import)')
.l-sub-section