参考链接：https://blog.csdn.net/qq_40677590/article/details/103733672?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-2-103733672.nonecase

1.语法：

   {{ }}插值语法  ?安全导航运算符,undefined或null时显示空白,页面不会报错  !非空断言,确认不会为undefined和null 

    内置模板函数$any()  消除特殊类型报错

2.模板语法

    [ ]属性绑定   ( )事件绑定  [( )]双向绑定

    ngIf(let of)   ngFor  ngSwitch>ngSwitchCase,ngSwitchDefault

3.数据双向绑定：

     双向绑定最简单的例子就是表单，当数据(model)发生改变时，view层自动更新，view改变时，model自动更新

<input [(ngModel)]="hero.name">

4.父子组件通信(父传子)

//组件传递，Input接收
<app-post-phone [post]="item"></app-post-phone>
@Input() post;

5.父子组件通信(子传父)

output回调

父组件INP
<input type="text" [(ngModel)]="inpData">
<app-test1 (getChild)="getChild($event)" [(inpData)]="inpData"></app-test1>子组件
<input type="text" (input)="change()" [(ngModel)]="inpData">@Input() inpData;
@Output() getChild = new EventEmitter();
change() {this.getChild.emit(this.inpData);
}

通过ViewChild获取子组件的所有数据和方法

--父组件
<app-test1 (getChild)="getChild($event)" [(inpData)]="inpData" #son></app-test1>
<p (click)="changeSon()">改变子组件</p>@ViewChild("son") son:any;
ngAfterViewInit(){console.log(this.son)
}changeSon(){this.son.sonData++;
}

 

子改父:1.父传修改自己的func给子,子调用传入的func改父

父改子:1.ViewChild获取子组件的所有数据和方法,直接修改或调用子的方法改子

也可以在service里声明一个变量,子父通过get set方法来共同管理

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';@Injectable({providedIn: 'root'
})
export class ReplystoreService {public noReadNum;constructor() { }getNoReadNum(){return this.noReadNum;}setNoReadNum(obj) {this.noReadNum=obj;}
}

6.发布订阅

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';@Injectable({providedIn: 'root'
})
export class ReplystoreService {public noReadObj = new Subject<any>()constructor() { }
}--发布
this.myReply.noReadObj.next(res.data);--订阅
import { tap } from 'rxjs/operators';
<ng-container *ngIf="noReadObj$ | async "></ng-container>
//未读数监听noReadObj$ = this.myRply.noReadObj.pipe(tap(res => {this.reqRedNumber=res.thread_msg_count?res.thread_msg_count:0;this.postRedNumber=res.post_msg_count?res.post_msg_count:0;this.sysRedNumber=res.sys_msg_count?res.sys_msg_count:0;}))

7.钩子函数

钩子函数	用途及说明
ngOnChanges()	当组件内输入属性值（引用）发生变化时触发,首次渲染也会触发
ngOnInit()	组件初始化完毕后触发,父传给子的变量还未渲染到html标签中
ngDoCheck()	变更检测，@input值改变会触发,首次渲染触发两次
ngAfterContentInit()	组件的投影部分内容初始化完毕后触发,页面元素已插入到HTML,父传给子的变量还未渲染到html标签中
ngAfterContentChecked()	变更检测，组件投影部分内容可能会发生变化时触发
ngAfterViewInit()	组件自身视图部分内容初始化完毕后触发,父传给子的变量已渲染到html标签中
ngAfterViewChecked()	变更检测，组件视图部分内容可能发生变化时触发
ngOnDestroy()	组件即将被销毁时触发

 

8.ngOnInit,ngAfterContentInit,ngAfterViewInit差异解析

<p>父组件值{{data1}}</p>
<p (click)="change()">改父组件的值</p>
<app-test1 [data1]="data1"><div class="aa">aa的内容{{data1}}</div><div class="dd">dd的内容{{data1}}</div>
</app-test1><div style="background-color: pink;"><ng-content select=".aa"></ng-content>子组件<p>子组件值:{{ data1 }}</p><ng-content select=".dd"></ng-content>
</div>

ngOnInit:ng-content投影部分还未初始化,若投影部分不带变量data1则此时会初始化显示

ngAfterContentInit:投影部分已在页面显示,但子组件变量还未渲染

ngAfterViewInit:页面内容全部加载完毕

9.常用管道

管道调用名	功能说明
anync	可订阅一个Observable或者promise对象，并返回它发出的最近一个值
number	将number类型的值格式化为string类型（通常用于位数补齐）
json	将一个值转换为json字符串格式
percent	将number类型的值格式化为带百分比（即%）的字符串
uppercase	将字符串类型的值全部转换为大写
lowercase	将字符串类型的值全部转换为小写
titlecase	将字符串类型的值全部转换为转成标题形式
currency	转换货币格式
keyvalue	将对象转化为{key：string,value:any}类型的数组
slice	返回指定裁切范围的数组
date	日期格式化

10.自定义管道

命令: ng g pipe <name>