Angular6 基础（数据绑定、生命周期、父子组件通讯、响应式编程）

Angular相比于vue来说，更像一个完整的框架，本身就集成了很多模块，如路由，HTTP，服务等，而vue是需要另外引入比如(vuex，axios等)。Angular引入了依赖注入、单元测试、类等后端概念，结合TS开发，加入类型管理机制，使前端代码也能严谨化，结构化。比起vue，angular更加适用于大型项目的开发与维护。

1、项目构建

// 属于全局安装，如果之前装过了，就不用多次执行该命令了~
npm install -g @angular/cli

// 新建项目(routiong表示加入路由)
ng new my-app --routing

// 进入项目
cd my-app

// 安装插件
npm install (这里之前使用cnpm install 会卡在95%的地方)

// 启动项目
ng serve

// 设置不同的端口(默认端口4200)
ng serve --port 5001

2、绑定

属性绑定

• DOM属性：当前值[property]="value"，可变，优先使用；可以使用插值表达式双花括号替换

<!-- 模板代码 -->
<h4>插值表达式</h4>
<img src="{{imgUrl}}" alt="">

<h4>DOM属性绑定</h4>
<img [src]="imgUrl" alt="">

// ts代码
export class BindComponent implements OnInit {
  imgUrl: string = "http://via.placeholder.com/300x100"
}

• HTML绑定：初始值[attr.Attribute]="value"，不可变，有的HTML属性没有对应的DOM属性，比如colspan，当没有DON属性的时候可使用；

• CSS类绑定：全替换[class]="classValue"，部分替换[class.className]="classValue"

<h4>class属性全绑定</h4>
<div [class]="allClass">黑玛鱼</div>

<h4>class属性部分绑定</h4>
<div class="aa" [class.bb]="bbValue">黑玛鱼</div>

.aa {color: red;}
.bb {font-weight: bold;}
.cc {font-size: 50px;}

  // 字符串类型
  allClass: string = 'aa bb cc';
  // 布尔类型
  bbValue: boolean = true;

指令绑定

• ngFor：循环指令

<h4>ngFor</h4>
<ul>
  <li *ngFor="let item of list;let i = index">
    第{{i+1}}条：{{item}}
  </li>
</ul>

  // 数组类型
  list: string[] = ['我的前半生','精彩绝伦','我的后半生','依然绚烂']

• ngIf：是否渲染dom元素

<h4>ngIf</h4>
<div>
  <span *ngIf="show">我是显式的</span>
  <span *ngIf="!show">我是隐式的</span>
</div>

 // 布尔类型
  show:boolean = true;

• ngClass：多类名显示

<h4>ngClass</h4>
<div  class="aa" [ngClass]="{bb: bbValue}">Angular指令</div>

• 事件绑定

<h4>事件绑定</h4>
<button (click)="todoClick()">点我</button>

    // 事件
    todoClick(){
    alert('点我干嘛？')
    }

双向绑定

• [(ngModel)]：常用于表单组件

<h4>双向绑定</h4>
<input type="text" [(ngModel)]="name">
<span>{{name}}</span>

这里注意，需要在app.module.ts引入表单模块FormsModule

管道

管道(过滤)：负责将原始值转成显示值

名称	效果
date	日期的转换：date:'yyyy-MM-dd HH:mm:ss'
number	数字的转换：number:'2.1-4'，保留2位整数，最少1个，最多4个
async	异步流
自定义	ng g pipe ...

<h4>管道</h4>
<span>今天是：{{today | date:"yyyy-MM-dd"}}</span>

  today: object = new Date()

投影

相当于vue的插槽，在ng中使用ng-content指令

• 单个投影

<!-- 父组件模板 -->
<app-child>
    <span>
      两个人在一起 进步快的那个人总是会甩掉原地踏步的那个人 因为人的本能都是希望更多地探求生命生活的外延和内涵
    </span>
</app-child>

<!-- app-child组件模板 -->
<h4>单个投影</h4>
<ng-content></ng-content>

• 多个投影
  
  使用类class命名，使用select定位

<!-- 父组件模板 -->
<app-child>
    <div class="ask">“下次见到她，你会怎么做？”</div>
    <div class="answer">“打个招呼，或者，带她看大海”</div>
</app-child>

<!-- app-solt组件模板 -->
<h4>多个投影</h4>
朋友问：<ng-content select=".ask"></ng-content>
他说：<ng-content select=".answer"></ng-content>

3、生命周期

方法	作用
ngOnChanges	父组件在初始化或者在修改子组件的输入属性时被调用。引用类型改变，不触发，初始化输入属性
ngDoCheck	数变更检测(zone.js) 发生的时候被调用，很频繁的被调用，只要视图有变化都会触发
ngAfterViewInit	模板初始化时调用（一次）
ngAfterViewChecked	模板变化检测
ngAfterContentInit	插槽值初始化时调用（一次）
ngAfterContentChecked	对插槽内容的初始化和变更检测，在视图初始化之前调用。此时可以更改值
ngDestory	路由切换的时候，前一个组件销毁，后一个组件创建

4、父子组件通讯

组件创建：ng直接使用 ng g component 的命令创建组件，会自动生成组件所需的文件，方便快捷。

// 父组件
ng g component parent
// 子组件
ng g component parent/child

父->子（@Input()）

使用 @Input() 让子组件知道哪个是输入的属性，对应vue中的props。

<h4>我是父组件</h4>
<input type="text" [(ngModel)]="tellchild">
<app-child [message]="tellchild"></app-child>

<h4>我是子组件</h4>
<div>父组件传来的数据是：{{message}}</div>

// 子组件ts，告诉组件，message是父组件传进来的
@Input() public message: string;

子->父 （@Output()）

依赖EventEmitter事件发射器，将信息发射emit给子组件

<h4>我是子组件</h4>
<div>父组件传来的数据是：{{message}}</div>
<input type="text" [formControl]="childmessage">

// 使用FormControl对象，响应式表单需要引入ReactiveFormsModule模块
  childmessage: FormControl = new FormControl();

  // 输出属性，需要定义成事件
  @Output() childtellEvent: EventEmitter<any> = new EventEmitter();

  ngOnInit() {
    this.childmessage.valueChanges.subscribe(msg => {
      // 通过emit将信息发射出去
      this.childtellEvent.emit(msg);
    })
  }

<h4>我是父组件</h4>
<input type="text" [(ngModel)]="tellchild">
<div>子组件传来的数据是：{{childmessage}}</div>
<!-- 事件绑定获取数据 -->
<app-child [message]="tellchild" (childtellEvent)="tellResult($event)"></app-child>

5、响应式编程

• 可观察对象
  
  Angular集成了 参考：Rxjs，它使用 Observable 对象来创建流，主要是用于监听一组值或者事件的集合

// 创建流
// 值的创建
Observable.of([1,2,3,4]);
// 事件的创建
var button = document.querySelector('button');
Observable.fromEvent(button,'click')

• 观察者
  
  不是对象，而是一个回调函数集合，它知道如何监听被 Observable 发送的值。通过订阅subscribe的方式观察可观察对象，取消订阅unsubscribe()

// 订阅流
Observable.from([1,2,3,4]).map(item =>{
    item * item
}).subscribe(
    // next检测
    res => console.log(res),

    // error检测
    err => console.log(err),

    // complete检测
    () => console.log('it`s over')
)