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

深藏阁楼爱情的钟 2023-05-30 15:55 2阅读 0赞

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

*  [https://www.angular.cn/guide/template-syntax][https_www.angular.cn_guide_template-syntax]
 *  [http://www.ngfans.net/topic/12/post/2][http_www.ngfans.net_topic_12_post_2]

## 系列目录 ##

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

[(2)组件详解之组件通讯][2]

[(3)内容投影, ViewChild和ContentChild][3_ ViewChild_ContentChild]

[(4)指令][4]

[(5)路由][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、值绑定,事件绑定,双向绑定**

3.1 值绑定

在模板内部,一些标签的某些属性不是固定的,会根据不同的情形变化,例如照片的src属性,  
我们可以通过值绑定(用\[\]表示),将它绑定到变量上,随着变量值的改变而改变

3.2 事件绑定

在模板内部,某些操作会触发事件,例如点击按钮  
我们可以通过事件绑定(用()表示),将它绑定到指定事件上

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

3.3 双向绑定

什么是双向绑定呢?指的是界面的操作能实时反映到数据，数据的变更能实时展现到界面。  
双向绑定用\[()\]来表示,常见的双向绑定有NgModel,它仅用于表单类元素上面

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

\**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,代码如下

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

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

> NgClass

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

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

special是已经写好的样式类<br><br>

> 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";

这样就可以在模板内部使用它们了

(终)

[https_www.angular.cn_guide_template-syntax]: https://www.angular.cn/guide/template-syntax
[http_www.ngfans.net_topic_12_post_2]: http://www.ngfans.net/topic/12/post/2
[1]: https://blog.csdn.net/weixin_42740530/article/details/103006071
[2]: https://blog.csdn.net/weixin_42740530/article/details/103006390
[3_ ViewChild_ContentChild]: https://blog.csdn.net/weixin_42740530/article/details/103006940
[4]: https://blog.csdn.net/weixin_42740530/article/details/103006969
[5]: https://blog.csdn.net/weixin_42740530/article/details/103006997