Angular6 学习笔记——组件详解之模板语法

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址:

https://www.angular.cn/guide/template-syntax

http://www.ngfans.net/topic/12/post/2

 

系列目录

(1)组件详解之模板语法

(2)组件详解之组件通信

(3)内容投影, ViewChild和ContentChild

(4)指令

(5)路由

 

章节目录

1插值语法和表达式

2在模板内部定义变量

3值绑定,事件绑定,双向绑定

4内置结构型指令*ngIf,*ngFor,ngSwitch

5内置属性型指令:NgClass,NgStyle

6管道与安全导航

7导入Bootstrap和fontawesome

 

Angular在模板引擎里面对这些最基本的东西作了很强的支持,因此它的模板表达能力是很是强的

 

1插值语法和表达式

相似前端模板引擎handlebars等的语法

可以插入定义的变量,简单的加减乘除等数学运算和调用方法

 <p>定义的变量:{{str}}</p>
 <p>简单数学运算:1+1={{1+1}}</p>
 <p>调用方法:{{getValue()}}</p>

　　

2在模板内部定义变量

咱们既能够在组件内部定义变量,也能够模板内部定义变量

经过#自动生成一个局部变量,给标签命名,能够在组件内部和模板内部传递

 <input #inputVal>
 <p>{{inputVal.value}}</p>
 <button class="btn btn-success" (click)="print(inputVal.value)">打印</button>

　　

3值绑定,事件绑定,双向绑定

值绑定

在模板内部,一些标签的某些属性不是固定的,会根据不一样的情形变化,例如照片的src属性,

咱们能够经过值绑定(用[]表示),将它绑定到变量上,随着变量值的改变而改变

 

事件绑定

在模板内部,某些操做会触发事件,例如点击按钮

咱们能够经过事件绑定(用()表示),将它绑定到指定事件上

   <img [src]="imgSrc" />
    <button (click)="changeImgSrc()">
      将事件changeImgSrc()绑定到button上来,
      修改imgSrc变量的值,改变img标签经过值绑定的src属性的值
    </button>

　　　

双向绑定

什么是双向绑定呢?指的是界面的操做能实时反映到数据，数据的变动能实时展示到界面。

双向绑定用[()]来表示,常见的双向绑定有NgModel,它仅用于表单类元素上面

    <input [(ngModel)]="str">
    <p>{{str}}</p>
    <button (click)="changeStr()"></button>　

组件内部修改数据可以实时反应到界面,界面上的修改也能实时传递到组件内部

 

4内置结构型指令*ngIf,*ngFor,ngSwitch:

*ngIf

在模板内部来判断元素是否存在,它不是用display:none或者class=hide等显示隐藏的方式,而是直接删除,因此为真即存在,为假即删除

它既能够是已经定义的变量,也能够是语句

 <p *ngIf="1>=2">为false不显示</p> 
 <p *ngIf="isShow">变量控制是否显示</p>　　

 

*ngFor

做用如其名,用于遍历数组 

    <ul>
      <li *ngFor="let item of arr;let i=index;">
        {{i+1}}:{{item.value}}
      </li>
    </ul>

　　

ngSwitch

神似其余语言里面的条件语句switch case,代码以下

<span [ngSwitch]="num">
    <span *ngSwitchCase="'1'">值为1</span>
    <span *ngSwitchCase="'2'">值为2</span>
    <span *ngSwitchCase="'3'">值为3</span>
    <span *ngSwitchCase="'4'">值为4</span>
    <span *ngSwitchCase="'5'">值为5</span>
    <span *ngSwitchDefault>默认值10</span>
  </span>

　　

 5内置属性型指令:NgClass,NgStyle

 NgClass和NgStyle都是用来经过代码控制标签样式

 NgClass

 得先写好样式文件,经过代码切换不一样的样式

<p [ngClass]="{'special':true}">用NgClass添加样式类</p>

special是已经写好的样式类

　　

 NgStyle

不须要先写好样式文件,可以细节的去处理样式

<p [ngStyle]="{'color':1>2?'red':'blue'}">用NgStyle控制内联样式</p>
<div [ngStyle]="{'background-image': 'url('+x.ImgUrl+')','width':'100%','height':'120px','background-size':'cover'}">

　　

　　

6管道与安全导航

管道

当咱们有数据须要作格式转换的时候,管道是很好的选择,由于它速度快,能复用

管道符号用|表示,例如x | y,把x做为参数传到y中处理,固然能够 x | y | z,它可以级联使用

例如时间的处理

    <p>{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</p>

 

安全导航　

不少时候咱们在使用某个对象变量的时候,若是这个对象为null或者undefined,当咱们直接点它下面的属性,就会报错

对于这种状况,经常使用的解决方法是三元操做,先判断一下这个对象

相比于三元操做,有更加优秀的解决方法

<p>{{Obj?.value}}</p>

它会先判断Obj,若是为null或者undefined,不会直接报错

 

7 导入Bootstrap和fontawesome

首先在配置文件package.json  dependencies下添加依赖的模块

    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",　　

 而后在src文件夹下的style文件里面添加

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.min.css";　　

 这样就能够在模板内部使用它们了

 (终)

 

文档信息

• 发表做者：  半路独行
• 发表出处：  博客园
• 原文地址：  http://www.javashuo.com/article/p-czilefxh-gm.html
• 版权信息：本做品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

 

---

感谢您的阅读，若是您以为阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，可是转载文章以后必须在文章页面中给出做者和原文链接。