在 Angular 中最典型的数据显示方式,就是把 HTML 模板中的控件绑定到 Angular 组件的属性。
1.使用插值表达式显示组件属性
在Angular中需要显示组件的属性,最简单,最直接的方式就是使用插值表达式 (interpolation) 来绑定属性名,要使用插值表达式,就把属性名包裹在双花括号里放进视图模板。
比如有一个组件demo,有自己的类文件DemoComponent,在类文件中有一个属性:title
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
这个时候,需要将title这个属性利用插值表达式显示在视图文件demo.html
<p>
{{title}}
</p>
然后运行之后显示的页面:
<body>
<app-root></app-root>
</body>
这个过程中,Angular 自动从组件中提取 title
属性的值,并且把这些值插入浏览器中。当这些属性发生变化时,Angular 就会自动刷新显示,这里所说的属性发生变化是指:某些与视图有关的异步事件之后发生的,例如,按键、定时器完成或对 HTTP 请求的响应。
在上面这个过程中,Angular替我们创建了一个DemoComponent的实例,在哪创建的呢?
注意: @Component 装饰器中指定的 CSS 选择器 selector
,它指定了一个叫 <app-root>
的元素。 该元素是 index.html
文件里的一个占位符,打开Index.html
<body>
<app-root></app-root>
</body>
当你通过 main.ts
中的 AppComponent
类启动时,Angular 在 index.html
中查找一个 <app-root>
元素, 然后实例化一个 AppComponent
,并将其渲染到 <app-root>
标签中。然后在AppComponent中,有<app-demo></app-demo>标签,然后Angular会自动的帮助我们实例化一个DemoComponent。
在AppComponent.html中:
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<app-demo></app-demo>
2.是否使用内联模版?
在Angular中有两个地方可以写模版代码,即html
第一个地方,在组件的@Component的template的属性,把模版定义为内联,前面的demo就可以这样写:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
// templateUrl: './demo.component.html',
template: `
<p>
{{title}}
</p>
`,
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
第二个地方,将模版代码写在一个独立的html文件中,然后通过@Component的templateUrl属性连接到这个独立的html文件中,前面的demo文件就可以这样写:
类文件:DemoComponent.ts
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
模版文件:DemoComponent.html
<p>
{{title}}
</p>
那具体使用哪一个比较好呢?这个取决于个人喜好、具体状况和组织级策略。 个人建议:当模版很小,并且没有额外的HTML文件时,使用内联,其他情况使用独立的HTML。
但是:无论用哪种风格,模板数据绑定在访问组件属性方面都是完全一样的。
在默认情况下,使用命令:
ng generate component componentName
创建的组件都带有模版文件,如果想使用内联的模版,则使用命令:
ng generate component componentName -it
3.使用哪种方式进行变量的初始化数据?
在Angular中可以使用两种方式:
a.变量赋值初始化:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
constructor() {
}
ngOnInit() {
}
}
b.利用构造函数进行变量的初始化
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title: string;
constructor() {
this.title = 'demoShowData';
}
ngOnInit() {
}
}
注意:为了使应用更加简短,应该使用:变量赋值初始化。
4.使用 ngFor 显示数组属性
在实际项目中,经常会遇到要在页面上显示一个数组这样的需求,在Angular中可以利用ngFor指令来显示数组中的每一个元素;
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
showDataList = ['showData1', 'showData2', 'showData3', 'showData4'];
constructor() {
}
ngOnInit() {
}
}
将showDataList这个数组中的每个元素显示在页面上。如下:
<p>
{{title}}
</p>
<ul>
<li *ngFor="let showData of showDataList">{{showData}}</li>
</ul>
保存刷新的页面为:
这样就将一个数据中的数据显示在了页面上;
注意:*ngFor 中的 * 不能丢了
5.通过 NgIf 进行条件显示
有时候有些数据只有在特定的情况下显示的,这个时候就会用到*ngIf这个指令,比如说:当showDataList数组的长度大于3的时候,显示一条信息:“数据长度超过了3”,修改DemoComponent.html文件如下:
<p>
{{title}}
</p>
<ul>
<li *ngFor="let showData of showDataList">{{showData}}</li>
</ul>
<h4 *ngIf="showDataList.length>3">数据长度超过了3</h4>
此时由于showDataList的长度为4,showDataList.length>3这个条件的结果是true,所以页面会显示:数据长度超过了3,即如下图:
此时修改一下DemoComponent.ts文件,删掉showDataList中的两个数据,即:
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.css']
})
export class DemoComponent implements OnInit {
title = 'demoShowData';
showDataList = ['showData1', 'showData2'];
constructor() {
}
ngOnInit() {
}
}
此时由于showDataList的长度为2,showDataList.length>3这个条件的结果是false,所以页面不会显示:数据长度超过了3,即如下图: