你的位置:首页 > Java教程

[Java教程]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: ` <form role="form">

                <div >

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

                </div>

       

                <span >attention:{{msg}}</span>

       

                <div >

                    <div >name</div>

                    <input type="text" id="name" name="name" [attr.size]="size" [placeholder]="name">

                </div>

 

                <div >

                    <div >age</div>

                    <input type="text" (change)="change()" id="age" name="age" [placeholder]="age">

                </div>

 

                <div >

                    <div >sex</div>

                    <input type="text" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex">

                </div>

 

               

                <div *ng-if="needpwd">

                    <div >pwd</div>

                    <input #inPwd type="password" [(ngModel)]="pwd" id="pwd" name="pwd">

                    <button type="button" (click)="show(inPwd.value)">warn</button>

                </div>

               

               

                <div >

                    <div [style.color]="color">

                        <button type="submit" [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 >attention:{{msg}}</span>

1.3 属性绑定

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

<div >

      <div >name</div>

       <input type="text" id="name" name="name" [placeholder]="name">

</div>

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

<div >

  <div >name</div>

  <input type="text" 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 >

      <div [style.color]="color">

       <button type="submit" [class.btn-primary]="isPrimary">Submit</button>

        </div>

</div>

1.4.2 Class绑定

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

<div >

      <div [style.color]="color">

       <button type="submit" [class.btn-primary]="isPrimary">Submit</button>

        </div>

</div>

1.5 * 与 <template>

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

<div *ng-if="needpwd">

      <div >pwd</div>

      <input type="password" [(ngModel)]="pwd" id="pwd" name="pwd">

</div>

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

<template [ngIf]="needpwd">

  <div >

      <div >pwd</div>

      <input type="password" [(ngModel)]="pwd" id="pwd" name="pwd">

</div>

</template>

1.6 局部变量

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

<div *ng-if="needpwd">

     <div >pwd</div>

     <input #inPwd type="password" [(ngModel)]="pwd" id="pwd" name="pwd">

      <button type="button" (click)="show(inPwd.value)">warn</button>

</div>

1.7 事件绑定

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

<div >

       <div >age</div>

        <input type="text" (change)="change()" id="age" name="age" [placeholder]="age">

</div>

1.8 双向绑定

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

<div >

      <div >sex</div>

      <input type="text" [(ngModel)]="sex" id="sex" name="sex" [placeholder]="sex">

</div>