深入理解Angular2 模板语法

站长资源 2024/11/30 佚名

2 0 1

1. 说明

Angular2的模板用来显示组件外观，作为视图所用，用法和html语法基本一致，最简单的Angular2的模板就是一段html代码。Angular模板语法主要包括以下几个部分：

l 直接绑定

l 插值表达

l 属性绑定

l 事件绑定

l 双向绑定

l 样式绑定

l 模板和 *

l 局部变量

首先来看一个模板例子，如下所示：

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ui-demo',
template: ` <form class="form-horizontal" role="form">
<div class="form-group">
<legend title="form">title</legend>
</div>
<span class="label label-warning">attention：{{msg}}</span>
<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [attr.size]="size" [placeholder]="name">
</div>
<div class="input-group">
<div class="input-group-addon">age</div>
<input type="text" class="form-control" (change)="change()" id="age" name="age" [placeholder]="age">
</div>
<div class="input-group">
<div class="input-group-addon">sex</div>
<input type="text" class="form-control" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex">
</div>
<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input #inPwd type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
<button type="button" class="btn btn-warning" (click)="show(inPwd.value)">warn</button>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>
</form>`
})
export class TemplateDemoComponent implements OnInit {
msg: string = "注意事项";
name: string = "name";
size: number = 4;
age: number = 15;
sex: string = 'male';
needpwd: boolean = true;
pwd: string = '';
color: string = "red";
isPrimary: boolean = true;
constructor() { }
ngOnInit() { }
change() {
}
show($event) {
console.log($event);
}
}

1.1 直接绑定

将字符串直接绑定在对应的属性上，例如将字符串 form 绑定到title属性上

<legend title="form">title</legend>

1.2 插值表达

插值表达采用{{}}的方式来表示，将组件中对应的表达式的值绑定到模板中进行显示，例如如下，将msg表达式的值在组件中显示

<span class="label label-warning">attention：{{msg}}</span>

1.3 属性绑定

属性绑定采用[]的方式来表示，将表达式的值绑定在对应的属性上，例如，将组件中name表达式得值绑定到属性placeholder 中

<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [placeholder]="name">
</div>

当属性绑定的元素中存在对应的属性的时候可以直接采用[xx]进行绑定，但是，当元素上不存在对应的属性的时候，必须采用[attr.xxx]这样atrr在加上一个点的方式来绑定对应的属性信息。

<div class="input-group">
<div class="input-group-addon">name</div>
<input type="text" class="form-control" id="name" name="name" [attr.size]="size" [placeholder]="name">
</div>

1.4 样式绑定

样式绑定主要包括两个方便，内联样式style及外部样式class绑定。

1.4.1 Style绑定

style绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个 style 前缀，紧跟着一个点 (.) ，再跟着 CSS 样式的属性名。表示在指定的元素上使用该属性，形如： [style.style-perporty]。例如

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>

1.4.2 Class绑定

CSS 类绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个 class 前缀，紧跟着一个点 (.) ，再跟着 CSS 类的名字组成，形如： [class.class-name]。表示是否在该元素上使用该css类或者移除该css类，后面的值为true的话表使用，false表示移除

<div class="form-group">
<div class="col-sm-10 col-sm-offset-2" [style.color]="color">
<button type="submit" class="btn btn-primary" [class.btn-primary]="isPrimary">Submit</button>
</div>
</div>

1.5 * 与 <template>

首先我们来看一个 * 与 <template> 的例子，

<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
</div>

* 是一种语法糖，让那些需要借助模板来修改 HTML 布局的指令更易于读写。NgFor、NgIf 和 NgSwitch 都会添加或移除元素子树，这些元素子树被包裹在 <template> 标签中。使用 * 前缀语法让我们忽略<template>标签，还原后的代码如下所示

<template [ngIf]="needpwd">
<div class="input-group">
<div class="input-group-addon">pwd</div>
<input type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
</div>
</template>

1.6 局部变量

局部变量采用#xxx的方式来表示，在元素上使用该表达式的话则可以使用xxx来代表该元素，可以在同一元素、兄弟元素或任何子元素中使用局部变量。如下所示，可以在兄弟节点使用该变量代表该元素

<div class="input-group" *ng-if="needpwd">
<div class="input-group-addon">pwd</div>
<input #inPwd type="password" class="form-control" [(ngModel)]="pwd" id="pwd" name="pwd">
<button type="button" class="btn btn-warning" (click)="show(inPwd.value)">warn</button>
</div>

1.7 事件绑定

属性绑定采用()的方式来表示，将组件的方法绑定到对应的事件上，例如，将change函数绑定到change事件中，当change事件发生时会触发change函数。

<div class="input-group">
<div class="input-group-addon">age</div>
<input type="text" class="form-control" (change)="change()" id="age" name="age" [placeholder]="age">
</div>

1.8 双向绑定

双向绑定使用[()]的方式来表示，双向绑定是属性绑定与事件绑定的结合体。最常用的双向绑定是使用[(ngModel)]=”xxx”在表单中进行使用，修改表单中数据的时候会修改绑定的数据项。如下所示：当表单输入修改时，sex变量也会同步修改

<div class="input-group">
<div class="input-group-addon">sex</div>
<input type="text" class="form-control" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex">
</div>

以上所述是小编给大家介绍的Angular2 模板语法的相关知识，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对网站的支持！

angular2,模板语法

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“深入理解Angular2 模板语法”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

深入理解Angular2 模板语法

JS中使用FormData上传文件、图片的方法

JS上传图片预览插件制作（兼容到IE6）

评论“深入理解Angular2 模板语法”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

深入理解Angular2 模板语法

JS中使用FormData上传文件、图片的方法

JS上传图片预览插件制作（兼容到IE6）

评论“深入理解Angular2 模板语法”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存