基于vue3速学angular

因为工作原因，需要接手新的项目，新的项目是angular框架的，自学下和vue3的区别，写篇博客记录下：
参考：https://zhuanlan.zhihu.com/p/546843290?utm_id=0

1.结构上：

vue3:一个vue文件，包括了html ts css
angular：至少需要三个文件，分别写html ts css
  文件写法如下：XXXXX.component.html

代码核心部分是ts文件里面的@Component，这里的功能是抛出了当前这个组件的调用名称 并且导入了html 和 css文件

@Component({// 组件标签名称 调用名称selector:'xxxx-target',// 模板页面路径templateUrl:'./xxxx-target.component.html',// 样式文件路径styleUrls:['./xxxx-target.component.less']})

2.html写法上，可以看到angular写法里面有很多括号[] ()，那具体是干什么用的呢

vue写法

<button v-if="isShow"class="test-button" @click="onClick":title="buttonTitle">{{'1111'}}</button><input v-else type="text" v-model="name"/><div v-for="(item,index) in cardList"></div><div v-show="isShow"></div><div :class="{ 'disabled': disabled, 'un-hover': true}":style="{ color: color }"></div><div><slot></slot><slot name="icon"></slot></div>

angular写法

<button *ngIf="isShow"class="test-button"(click)="onClick()"[title]="buttonTitle">{{'1111'}}</button><input #elseTemplate type="text"[(ngModel)]="name"/><div *ngFor="let item of cardList;let i = index"></div><div [hidden]="isShow"></div><div [ngClass]="{ 'disabled': disabled, 'un-hover': true}"[ngStyle]="{ color: color }"></div><div><ng-content></ng-content><ng-content select="[icon]"></ng-content></div>

可以很轻松的看出差异
@click=>(click) 注意，vue里面可以隐藏函数的括号，angular必须加
:title=>[title]
v-model=>[(ngModel)]
v-if=>*ngIf
v-else=>#elseTemplate
v-for=>*ngFor 注意，angular的index需要let i = index写，然后下面用i来当index用
v-show=>[hidden]
:class=>[ngClass]
:style=>[ngStyle]
slot=>ng-content 注意，angular的插槽用的是select=“[xxx]”

插槽使用方式区别

<div-xxx><template #icon><div class="tips"></div></template></div-xxx>
差别就是angular不需要套一层template，如果是icon插槽增加一个icon属性即可
<div-xxx><div icon><div class="tips"></div></div></div-xxx>

3.ts写法上：
先来几个最常用的，子和父如何通讯的
angular：

在Angular组件之间共享数据，有以下几种方式：
1.父组件至子组件: 通过 @Input 共享数据
2.子组件至父组件: 通过 @Output EventEmitter 共享数据
3.子组件至父组件: 通过 本地变量共享数据
4.子组件至父组件: 通过 @ViewChild 共享数据
5. 不相关组件： 通过 service 共享数据，
缓存、广播等

下面用代码看下和vue3的区别

vue3写法

子组件：
<template><button  @click="onClick" loading="loading"{{$t('refresh')}}</button></template><script lang="ts" setup>const emit =defineEmits(['on-click']);const props =defineProps({loading:{type: Boolean,default:true},});constonClick=()=>{emit('on-click');};</script>
父组件：
<template><button-XXXX  @onClick="onRefresh":loading="xxxLoading"/></template><script lang="ts" setup>const xxxLoading=ref(false);constonRefresh=async()=>{
  xxxLoading.value=true;// 执行函数awaitXXX();
  xxxLoading.value=false;};</script>

angular写法：

子组件：
@Component({selector:'xxx-button',template:`<button (click)="onClick(true)">{{buttonName}}</button>`,})exportclassxxxComponentimplementsOnInit{
  @Output() vote =newEventEmitter<any>();
  @Input() buttonName: any;constructor(){}ngOnInit():void{}onClick(isAdd:boolean):void{this.vote.emit(isAdd);}}
父组件：
@Component({selector:'xxx-div',template:`<xxx-button [buttonName]="buttonName" (vote)="onVote($event)"></xxx-button>`,})exportclassxxxComponent{
  buttonName="按钮名称";constructor(){}onVote(isAdd:boolean):void{if(isAdd){//具体操作}}}

那么vue里面的父通过ref访问子组件，在angular要怎么实现呢，如下，只需要在父组件ts代码里面写@ViewChildren(‘xxx’) xxx ，然后在html子组件里面加上#xxx就行

@Component({selector:'xxx-div',template:`<xxx-button #test1 [buttonName]="buttonName" (vote)="onVote($event)"></xxx-button>`,})exportclassxxxComponent{
  @ViewChildren('test1') test1;
  buttonName="按钮名称";constructor(){}onVote(isAdd:boolean):void{if(isAdd){//具体操作
        console.log('test1',test1)}}}

监听事件：
vue3里面有watch watcheffet,我研究了下angular的，好像只有类似watcheffet的监听方法
需要监听的参数写在ngOnChanges里面的changes.XXX 当这个值变化的时候会触发

vue3写法

watch(()=> props.isOpen,(value)=>{
    console.log(value)},{deep:true,immediate:true});watchEffect(()=>{
  visible.value = props.show;});

angular写法

  @Input() xxxDeatail;ngOnChanges(changes: SimpleChanges):void{// xxxDeatail 属性值变更时if(changes.xxxDeatail){this.initDeatail();}}initDeatail(){}

计算属性，angular好像没有这玩意

4.生命周期上
angular：

ngOnChanges：当 Angular 设置或重新设置数据绑定的输入属性时响应。时间上位于OnInit之前。初始化和值发生变化时调用。
ngOnInit：用于初始化页面内容，只执行一次。时间上位于OnChanges之后。
ngDoCheck：每次变更检测时执行，并会在发生Angular自己本身不能捕获的变化时作出反应。紧跟在ngOnChanges 和 ngOnInit钩子之后执行。慎用。
ngAfterContentInit：当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。第一次 ngDoCheck 之后调用，只调用一次。
ngAfterContentChecked：每当 Angular 检查完被投影到组件或指令中的内容之后调用。ngAfterContentInit和每次 ngDoCheck之后调用。
ngAfterViewInit：当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用。第一次 ngAfterContentChecked之后调用，只调用一次。
afterViewChecked：每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。ngAfterViewInit和每次 ngAfterContentChecked 之后调用。
ngOnDestroy：每当 Angular 每次销毁指令/组件之前调用。