angular 学习记录（五）

一、模板引用变量（#var）

1.创建组件简写命令：

ng  g c hello-components

2.如何获取用户输入的数据的方式：

第一种：使用双向数据绑定：

<div>
 <!-- input标签中使用[(ngModel)] 双向数据绑定 -->
    <input type="text" [(ngModel)]="text" >
 <!-- 在button中绑定事件 -->
    <button (click)="show01()">double-click</button>
</div>

image.png

效果：

image.png

第二种：使用模板变量简写：

<div>
    <!-- 模板变量 -->
    <input type="text" #phone>
    <button (click)="show02(phone.value)">double-click</button>
</div>

image.png
image.png

第三种：使用模板变量全称：

<div>
    <!-- 模板变量 ref -->
    <input type="text" ref-phone>
    <button (click)="show02(phone.value)">double-click</button>
</div>

image.png

二、安全导航符（？.）：

1.angular 的安全导航操作符（？.）

是一种流畅而便利的方式，用来保护出现在属性路径中null和undefined的值。下面的例子是：当people为空时，保护视图渲染器，让他免于失败
使用前：

image.png

使用后：

image.png

2.也可以使用判断代替：

image.png