发表于: 2020-03-31 21:52:51
0 1408
今日完成
使用插值显示组件属性
要显示组件的属性,最简单的方式就是通过插值 (interpolation) 来绑定属性名。 要使用插值,就把属性名包裹在双花括号里放进视图模板,如 {{myHero}}。
使用 CLI 命令 ng new displaying-data 创建一个工作空间和一个名叫 displaying-data 的应用。
删除 app.component.html 文件,这个范例中不再需要它了。
然后,到 app.component.ts 文件中修改组件的模板和代码。
修改完之后,它应该是这样的:
src/app/app.component.ts
content_copy
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
再把两个属性 title 和 myHero 添加到之前空白的组件中。
修改完的模板会使用双花括号形式的插值来显示这两个模板属性:
src/app/app.component.ts (template)
content_copy
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
模板是包在 ECMAScript 2015 反引号 (`) 中的一个多行字符串。 反引号 (`) — 注意,不是单引号 (') — 允许把一个字符串写在多行上, 使 HTML 模板更容易阅读。
Angular 自动从组件中提取 title 和 myHero 属性的值,并且把这些值插入浏览器中。当这些属性发生变化时,Angular 就会自动刷新显示。
严格来说,“重新显示”是在某些与视图有关的异步事件之后发生的,例如,按键、定时器完成或对 HTTP 请求的响应。
注意,你没有调用 new 来创建 AppComponent 类的实例,是 Angular 替你创建了它。那么它是如何创建的呢?
注意 @Component 装饰器中指定的 CSS 选择器 selector,它指定了一个叫 <app-root> 的元素。 该元素是 index.html 文件里的一个占位符。
评论