携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

写在前面: 第一篇文档简单介绍了vue和angular的关系,以及记录了下在angular开发中的常用语法,以及跟vue框架的关系和区别,但主要是模板方面的,今天记录一下逻辑方面的区别.

事关我个Vue开发转Angular的那些事二

组件封装

- 创建Hero文件夹
- 创建`Hero-component.html`,`Hero-component.scss`和`Hero-component.ts`
- html文件和scss文件编写组件的静态样式,html可使用模板语法,控制ts中的数据.
- ts文件负责组件的业务逻辑以及数据的处理.
- 每一个组件文件，本质上都是一个class类.

模板文件

import { Component,OnInit,EventEmitter.Injector,OutPut,ElementRef } from '@angular/core';
// 类似vue的composition api写法,引入hooks

import { Hero } from './hero';
// 引入依赖

// 组件资源声明
@Component({
selector: 'hero-detail',
templateUrl:'./hero.component.html',
styleUrls:'./hero.component.style',
})

// 组件逻辑
// class类的写法,es6的类的特性以及angular的特性结合在一块
export class HeroDetailComponent
    extends Hero
    @Input() firstName: string; // 输入属性 
    @Input() lastName: string; // 输入属性
    name:string; // 变量声明
    skill:any;
    constructor(
        public service:sessionService,
        private ele: element,
        protected injector: Inject,
    ){
        super(injector);
    }
    // 类似created()生命周期
    ngOnInit(){
        this.initMessage();
    }
    // 声明事件 类似setup写法.
    initMessage(){
        console.log("message")
    }

使用 EventEmitter 实现自定义事件

deleteRequest = new EventEmitter<Hero>();
delete() {
    this.deleteRequest.emit(this.hero);
}

组件定义了deleteRequest属性，它是EventEmitter实例。 当用户点击删除时，组件会调用delete()方法，让EventEmitter发出一个Hero对象。

<hero-detail 
(deleteRequest)="deleteHero($event)" 
[hero]="currentHero"
>
</hero-detail>

当deleteRequest事件触发时，Angular 调用父组件的deleteHero方法， 在$event变量中传入要删除的英雄（来自HeroDetail）

生命周期

• ngOnChanges
  • 执行多次，它会一直检测输入属性,当父组件的数据发生变化时,输入属性就会变化,除非输入属性是一个对象，改变值并不能改变引用地址
• ngOnInit
  • 只执行一次。在第一轮ngOnChanges()完成之后调用，这个函数用来初始化页面内容,获取不到dom,类似vue的created();
• ngDoCheck
  • 不常用,ngOnInit()和每次ngOnChanges()之后调用
• ngAfterContentInit
  • 只执行一次。第一次 ngDoCheck() 之后调用，ng-content(template)内容投影(vue插槽)渲染初始化的时候
• ngAfterContentChecked
  • 执行多次,每次检查投射内容的时候执行,ngDoCheck 调用之后都会触发
• ngAfterViewInit
  • 只执行一次。第一次 ngAfterContentChecked() 之后调用,用来获取dom
• ngAfterViewChecked
  • 执行多次,在每次检查 compoent 页面或者它的子页面的时候执行，ngDoCheck 调用之后都会触发
• ngOnDestroy
  • 执行一次,在 commponet 被销毁之前,类似vue的Destroy()

输入输出属性

• 目标属性必须被显式的标记为输入或输出。

• 输入属性通常接收数据值。 输出属性暴露事件生产者，如EventEmitter对象。

// 被装饰器标记成了输入和输出属性
@Input() hero: Hero;
@Output() deleteRequest = new EventEmitter<Hero>();

// 在指令元数据的`inputs`或`outputs`数组中标记出这些成员
@Component({
inputs: ['hero'],
outputs: ['deleteRequest'],
})

• 属性别名

@Output('myClick') clicks = new EventEmitter<string>();

@Directive({
outputs: ['clicks:myClick'] // propertyName:alias
})

父子组件间传值

@InInput和@Output方法

// 子组件
export class testExample implements OnInit{
    @Input test:any = {};
    @Output testFun = new EventEmitter<any>();
}



// 父组件
<test-example [test]="test" (testFun)="testFun($event)"></test-example>

inputs和outputs

@Component({ 
    //... 
    inputs:['test'],
    outputs:['testFun']
}) 
export class testExample implements OnInit{
    test:any = {};
    testFun = new EventEmitter<any>();
}

@ViewChild

import { Component,AfterViewInit,ViewChild } from '@angular/core';

@Component({
    selector:'collection',
    template:` <contact-collect (click)="collectTheContact()"></contact-collect> ` 
}) 
export class CollectionComponent {
    @ViewChild(ContactCollectComponent) contactCollect: ContactCollectComponent;
    ngAfterViewInit(){ 
    //... 
    } 
    collectTheContact(){
        this.contactCollect.collectTheContact();
    }
}

• ViewChild是属性装饰器,用来从模板视图中获取匹配的元素.
• 视图查询在ngAfterViewInit钩子调用前完成,因此在ngAfterViewInit钩子中,能正常获取查询的元素.
• ViewChildren装饰器用来从模板中获取匹配的多个元素,返回的结果是一个QueryList集合

To Be Continue