深入理解Angular2 模板语法

深入理解Angular2 模板语法

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: `

http://

title

attention：{{msg}}

warn

Submit

})

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属性上

title

1.2 插值表达

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

attention：{{msg}}

1.3 属性绑定

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

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

1.4 样式绑定

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

1.4.1 Style绑定

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

Submit

1.4.2 Class绑定

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

Submit

1.5 * 与

首先我们来看一个 * 与

* 是一种语法糖，让那些需要借助模板来修改 HTML 布局的指令更易于读写。NgFor、NgIf 和 NgSwitch 都会添加或移除元素子树，这些元素子树被包裹在

1.6 局部变量

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

warn

1.7 事件绑定

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

1.8 双向绑定

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。