Angular表单、管道、绑定、指令、通信和周期源码分析

这篇文章主要介绍了Angular表单、管道、绑定、指令、通信和周期源码分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Angular表单、管道、绑定、指令、通信和周期源码分析文章都会有所收获，下面我们一起来看看吧。

创新互联公司专注于新密企业网站建设,响应式网站,成都商城网站开发。新密网站建设公司,为新密等地区提供建站服务。全流程按需设计，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

1 Angular的两大表单

1.1 模板驱动表单

模板驱动表单：引入FormsModule模块，表单的控制逻辑都是写在模板里的，每一个表单元素都是和一个负责管理内部表单模型的指令关联起来的。

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-module-form',
  template:`
  
    用户名：
      

      
        请输入用户名

最少2个字符

最多6个字符

密码：

请输入密码

//原始的定义方法 export class ReactiveRegistComponent implements OnInit { formModel:FormGroup; constructor() { this.formModel=new FormGroup({ username:new FormControl(), mobile:new FormControl(), passwordsGroup: new FormGroup({ password:new FormControl(), pconfirm:new FormControl(), }) }); } } //使用formBuilder后的定义 constructor(fb:FormBuilder) { this.formModel=fb.group({ username:[''], mobile:[''], passwordsGroup: fb.group({ password:[''], pconfirm:[''], }) }); }

import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms'; @Component({ selector: 'app-module-form', // templateUrl: './module-form.component.html', template:` 用户名：

请输入用户名最多只能有6个字符

密码：

请输入密码

`, styleUrls: ['./module-form.component.less'] }) export class ModuleFormComponent implements OnInit { form!: FormGroup; constructor(private fb: FormBuilder) { } ngOnInit() { this.form = this.fb.group({ username:[null,[Validators.required,Validators.maxLength(6)]], password:[null,[Validators.required]], }) } }

export function whiteSpaceValidator(): ValidatorFn { // 不能全输入空格，验证 return (control: FormControl): { [s: string]: boolean } => { const reg = new RegExp(/\s/g); if (reg.test(control.value)) { return { required: true }; } }; }

当前时间日期为{{curDate|date}}

当前时间日期为{{curDate|date:"yyyy/MM/dd"}}

转大写{{title|uppercase}}

转小写{{title|lowercase}}

转换金额字符串{{0.259|currency}}

转换金额百分比{{0.259|percent}}

import { PipeTransform, Pipe } from '@angular/core'; @Pipe({ name: 'TimeFormater', }) export class TimeFormaterPipe implements PipeTransform { // // 传入的是一个一毫秒为单位的时间数 transform(value) { if (!value || value <= 0) { return '00天00时00分00秒'; } const time = Math.abs(value); const transecond = Math.round(time / 1000); // 转化为秒 const day = Math.floor(transecond / 3600 / 24); // 获取天数 const hour = Math.floor((transecond / 3600) % 24); // 获取小时，取余代表不满一天那部分 const minute = Math.floor((transecond / 60) % 60); // 获取分，取余代表不满小时那部分 const second = transecond % 60; return `${this.formatTime(day)}天${this.formatTime(hour)}时${this.formatTime(minute)}分${this.formatTime(second)}秒`; } formatTime(t) { return t < 10 ? '0' + t : '' + t; } }

// Directive:在declarations import { Directive, ElementRef } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(el:ElementRef) { el.nativeElement.style.backgroundColor = 'yellow'; } }

import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { constructor(private el:ElementRef) { } // 监听鼠标悬浮背景颜色设置 @HostListener('mouseenter') onMouseEnter(){ this.hightlight('yellow'); } // 监听鼠标离开背景颜色设置 @HostListener('mouseleave') onMouseLeave(){ this.hightlight(''); } private hightlight(color:string){ this.el.nativeElement.style.backgroundColor = color; } }

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'; @Directive({ selector: '[appTagdisplay]' }) export class TagdisplayDirective { private hasView = false; // ViewContainerRef访问视图容器 constructor(private templateRef:TemplateRef,private viewContainer:ViewContainerRef) { } @Input() set appTagdisplay(condition:boolean){ if(!condition&&!this.hasView){ // 视图容器创建一个内嵌的视图 this.viewContainer.createEmbeddedView(this.templateRef); this.hasView = true; }else if(condition&&this.hasView){ // 清除该容器，销毁该视图 this.viewContainer.clear(); this.hasView = false; } } }

import { Component, OnInit } from '@angular/core'; export class FatherComponent implements OnInit { isClear:boolean=false; fatherData:any; currentData:Array=[]; constructor() { } ngOnInit() { this.fatherData = this.currentData; } send(){ this.currentData.push("我是父组件的数据："+this.fatherData); this.fatherData=''; } getSonInfo(event:any){ this.currentData.push("我是子组件的数据："+event); } }

import { OnInit } from '@angular/core'; export class SonComponent implements OnInit{ @Input() dataSource:any=0; @Output() sonSend = new EventEmitter(); isClear:boolean=false; sonData:any; currentData:Array=[]; constructor() { } ngOnInit(): void { this.currentData = this.dataSource; } send(){ this.sonSend.emit(this.sonData); // this.currentData.push("我是子组件的数据："+this.sonData); this.sonData=''; } }

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class MissionService { // 源 private missionAnnounceSource = new Subject(); private misssionConfirmedSource = new Subject(); // 流 // asObservable:可观察的序列，隐藏源序列的身份。 missionAnnounce$ = this.missionAnnounceSource.asObservable(); missionConfirm$ = this.misssionConfirmedSource.asObservable(); constructor() {} announceMission(mission:string){ this.missionAnnounceSource.next(mission); } confirmMission(astronaut:string){ this.misssionConfirmedSource.next(astronaut); } }

import { Component, OnInit } from '@angular/core'; import { MissionService } from 'src/app/service/mission.service'; @Component({ selector: 'app-missioncontrol', template: `

导弹控制器

准备开始

日志

`, }) export class MissioncontrolComponent implements OnInit { astronauts = ['操作员1','操作员2','操作员3']; history:string[] = []; missions = ['发射导弹']; nextMession = 0; constructor(private misssionSvc:MissionService) { // 获取子组件保存的信息，获取是哪一个操作员点击确认了 misssionSvc.missionConfirm$.subscribe((astronaut)=>{ this.history.push(`${astronaut}已经确认`); }) } announce(){ let mission = this.missions[this.nextMession++]; this.misssionSvc.announceMission(mission); this.history.push(`任务"${mission}"进入准备`); if(this.nextMession>=this.missions.length){ this.nextMession = 0; } } ngOnInit(): void { } }

import { Component, Input, OnInit, OnDestroy } from '@angular/core'; import { Subscription } from 'rxjs'; import { MissionService } from 'src/app/service/mission.service'; @Component({ selector: 'app-astronaut', template: `

{{astronaut}}:{{mission}}确认

`, }) export class AstronautComponent implements OnInit,OnDestroy{ @Input() astronaut:string=''; mission = '<没有任务>'; confirmed = false; announced = false; subscription:Subscription; constructor(private missionSvc:MissionService) { // 获取父组件的数据 this.subscription = missionSvc.missionAnnounce$.subscribe((mission)=>{ this.mission = mission;// 发射导弹 this.announced = true;// 激活确认按钮 this.confirmed = false; }) } confirm(){ // 禁用按钮 this.confirmed = true; // 点击确认，保存当前的操作员数据 this.missionSvc.confirmMission(this.astronaut); } ngOnDestroy(): void { // 防止内存泄漏 this.subscription.unsubscribe(); } ngOnInit() { } }

import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; @Component({ selector: 'app-father', template:`按钮跳到儿子组件中` }) export class FatherComponent implements OnInit { obj:any=[ '书悟空', '唐僧', ]; constructor(private router:Router) {} ngOnInit() {} linkSon(){ this.router.navigate(['/son',{ name:this.obj,id:10010}]); //http://localhost:4209/son;name=书悟空,唐僧;id=10010 } }

import { Component, Input, OnInit, SimpleChanges, OnChanges } from '@angular/core'; // 子组件js export class TwoComponent implements OnInit,OnChanges { @Input() data:any=0; constructor() { } ngOnInit(): void { console.log('ngOnInit',this.data); } increment(){ this.data++; } decrement(){ this.data--; } ngOnChanges(changes: SimpleChanges): void { console.log("previousValue：",changes['data'].previousValue); console.log("currentValue：",changes['data'].currentValue); } }

import { DoCheck,OnInit } from '@angular/core'; export class SonComponent implements OnInit,DoCheck { dataSource:any; constructor() { } ngOnInit(): void { console.log("ngOnInit!"); } ngDoCheck(): void { console.log("DoCheck：",this.dataSource); } }

import { AfterContentChecked, AfterContentInit,DoCheck, Input, OnInit } from '@angular/core'; export class SonComponent implements OnInit,DoCheck,AfterContentInit{ @Input() data:any=0; dataSource:any; constructor() { } ngOnInit(): void { console.log("ngOnInit!"); } ngAfterContentInit(): void { console.log("ngAfterContentInit!",this.dataSource); } ngDoCheck(): void { console.log("DoCheck：",this.dataSource); } }

import { AfterContentChecked, AfterContentInit, DoCheck, Input, OnInit } from '@angular/core'; export class SonComponent implements OnInit,DoCheck,AfterContentInit,AfterContentChecked{ @Input() data:any=0; dataSource:any; constructor() { } ngOnInit(): void { console.log("ngOnInit!"); } ngAfterContentInit(): void { console.log("ngAfterContentInit!",this.dataSource); } ngAfterContentChecked(): void { console.log("ngAfterContentChecked!",this.dataSource); } ngDoCheck(): void { console.log("DoCheck：",this.dataSource); } }

export class SonComponent implements OnInit,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit{ dataSource:any; constructor() { } ngOnInit(): void { console.log("ngOnInit!"); } ngAfterContentInit(): void { console.log("ngAfterContentInit!",this.dataSource); } ngAfterContentChecked(): void { console.log("ngAfterContentChecked!",this.dataSource); } ngAfterViewInit(): void { console.log("ngAfterViewInit!"); } ngDoCheck(): void { console.log("DoCheck：",this.dataSource); } }

Angular表单、管道、绑定、指令、通信和周期源码分析

1 Angular的两大表单

1.1 模板驱动表单

1.2 响应式表单

2 Angular管道

2.1 内置管道

2.2 链式管道

2.3 自定义管道

3 Angular的三大绑定

3.1属性绑定

3.2 attribute、class和style绑定

3.3 事件绑定

4 Angular的三大指令

4.1 属性型指令

4.2 结构型指令

自定义结构指令

4.3 组件

5 Angular的五大组件通信

5.1 Input与Output实现父子组件通信

5.2 通过本地变量实现父子组件的通信

5.3 通过@ViewChild实现父子组件的通信

5.4 通过共享服务Service实现非父子组件通信

导弹控制器

日志

5.5 路由传值

6 Angular的八大生命周期

6.1 ngOnChanges()

6.2 ngOnInit()

6.3 ngDoCheck()

6.4 ngAfterContentInit()

6.5 ngAfterContentChecked()

6.6 ngAfterViewInit()

6.7 ngAfterViewChecked()

6.8 ngOnDestroy()

其他资讯