三天入手angular9 全干货 基础篇(一)

前提： 有angular1的基础，而且是很牢固那种，不是摸过一两次项目就完事了。

修炼指南](https://zhuanlan.zhihu.com/p/36385830)

单向流：从数据源到视图
(1) 插值 ，表达式同vue

{{}}

安全插入html

<div [innerHTML]="<h1>我是标题</h1>"></div>

(2) 属性

静态属性
<a [ttile]="ww.baidu.com">百度</a>

动态属性，比如循环id
<a [id]="'my-'+id"> // id为变量，字符串使用单引号括起来

(3) 事件

<a (click)="myClick(parrams)">点我</a> //  (事件名)

(4) 双向绑定

<input [(ngModel)]="username" name="username> //  [(内部变量名)]

(5) 内置结构型指令
NgIf

<div *ngIf="myTime">biuuuu</div>

NgFor

单层嵌套
<ul>
	<li *ngFor="item of data; let i = index">{{i}} -- {{item.name}}</li>
</ul>
多层嵌套
<ul>
	<li *ngFor="itime of data; trackBy:item.id;>
		<ul>
			<li *ngFor="subItem of itime; trackBy: subItem.id;">
				{{subItem.id}} -- {{subItem.name}}
			</li>
		</ul>
	</li>
</ul>

(6) 模板引用变量（ #var ）

<input #phone placeholder="phone number" />
<button (click)="callPhone(phone.value)">Call</button>

#phone相当是获取了input元素的变量
(7) 模板赋值（let-var）
这是NG-ZORRO的table分页功能的一部分

<nz-table
	...
	[nzTotal]='total'
   [nzShowTotal]="totalTemplate" // 指定引用的模板
   ...
 >
<ng-template #totalTemplate let-total>共 {{ total }} 条记录</ng-template>

上面将total的值赋值给了total变量

(8) 管道

{{ item.startTime | date: "yyyy-MM-dd HH:mm:ss" }}

(9) ？和！
? 可以对在属性路径中出现 null 和 undefined 值进行保护。在这里，如果 item 为 null ，它可以防止视图渲染失败。

{{item?.name}}

在 TypeScript 2.0 中，你可以使用 --strictNullChecks 标志强制开启严格空值检查。TypeScript 就会确保不存在意料之外的 null 或 undefined
！可以告诉类型检查器当变量是null或者undefine时不要抛出错误。
其实说白了就是你确定该变量不会是null或者undefine

fg!:FormGroup; // 定义变量类型，非空
<p *ngIf="item">The item's color is: {{item!.color}}</p> // 模板上使用

(10) 内置模板函数
防止item下没有该属性报错的写法。

	{{$any(item).bestByDate}}

(11) 生命周期
ng和vue生命周期对比
ngOnInit() -> created()
ngAfterViewInit() -> mounted()
ngOnDestroy() -> destroy()