angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks  文档中做了介绍。

ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件;

ngAfterViewInit() 初始化完组件视图及其子视图之后调用。

ngOnInit() 钩子应该是我们用得最频繁的一个了,在使用命令 ng g component <component-name> 生成一个组件后,就有 ngOnInit() 方法。

ngOnInit() 钩子可以作为初始化时调用一些方法。如:

ngOnInit() 钩子也可以更改视图样式,如:

建议在写 angular 的时候尽量少的使用 jQuery,除非一些简单好用的 jQuery 插件

而 ngAfterViewInit() 钩子是在组件视图或者子组件视图初始化完成之后调用。

项目中遇到了这样一个需求:

一、描述:

1. 通过选择开始时间和结束时间,来查询列表记录:

2. 这个功能在一个模块,4个不同的组件中用到;

3. 初始化时开始时间是当前时间减1天,结束时间是当前时间;

4. 开始时间和结束时间格式“2018-12-03 09:09:09”;

二、解决方法:

1. 时间控件选择了日期时间选择器(Bootstrap日期和时间表单组件)

2. 将日期时间选择器功能进行封装成一个单独的组件 DateTimeSelectorComponent,方便4个组件中用到;

3. 以其中一个父组件 OfflineComponent 为例,监听子组件 DateTimeSelectorComponent 的事件,子组件暴露一个 EventEmitter  属性,当事件发生时,子组件利用该属性 emits(向上弹射)事件。父组件绑定到这个事件属性,并在事件发生时作出回应;

4. 待子组件返回值了,父组件才做出相应的数据请求和方法调用。这里父组件中就是用 ngAfterViewInit() 钩子。

三、最终结果:

三、实际操作:

1. 首先封装 DateTimeSelectorComponent 组件

  • 模板:
<div class="start-end-time-search">
<label for="startTime" class="start-time-label">起止时间</label>
<input type="text" [(ngModel)]="startTime" placeholder="请选择开始时间" readonly id="startTime" class="start-time">
<label for="endTime" class="end-time-label">至</label>
<input type="text" [(ngModel)]="endTime" placeholder="请选择结束时间" readonly id="endTime" class="end-time">
</div>
  • 组件

    1.暴露一个 EventEmitter 属性,以及定义一些需要返回给父组件的属性

  public startTime: string = "";
public endTime: string = "";
public isEnabledSearchBtn: boolean = true; // 查询按钮是可用的
public startTimeErrorTip: string = ""; // 开始时间选择错误提示
public endTimeErrorTip: string = ""; // 结束时间选择错误提示
@Output() timeInfo = new EventEmitter<object>();

    2. 定义一个方法来格式化日期时间

// 日期时间格式 "2018-09-20 00:00:00"
dateTimeFormat(dateTime) {
let dateTimeObj = {
"year": dateTime.getFullYear(),
"month": dateTime.getMonth() + 1,
"day": dateTime.getDate(),
"hours": dateTime.getHours(),
"minutes": dateTime.getMinutes(),
"seconds": dateTime.getSeconds()
};
for (let k in dateTimeObj) {
if (dateTimeObj[k] < 10) {
dateTimeObj[k] = "0" + dateTimeObj[k];
}
}
let dateTimeString = dateTimeObj.year + "-" + dateTimeObj.month + "-" + dateTimeObj.day + " "
+ dateTimeObj.hours + ":" + dateTimeObj.minutes + ":" + dateTimeObj.seconds;
return {"obj": dateTimeObj, "string": dateTimeString};
}

返回两种类型,对象类型和字符串类型可供选择。

    3. 将信息返回给父组件

  // 选择时间,选择完时间或者初始化时,调用一次,将时间信息发送给父组件
selectTime() {
let data = {
isEnabledSearchBtn: this.isEnabledSearchBtn,
startTime: this.startTime,
endTime: this.endTime,
startTimeErrorTip: this.startTimeErrorTip,
endTimeErrorTip: this.endTimeErrorTip
};
this.timeInfo.emit(data);
}

    4. 组装数据(返回给父组件的信息)

ngOnInit() {
let initNowTime = this.dateTimeFormat(new Date());
// 开始时间用当前时间减去一天,结束时间使用当前时间
this.startTime = initNowTime.obj.year + "-" + initNowTime.obj.month + "-" +
((initNowTime.obj.day - 1) < 10 ? ("0" + (initNowTime.obj.day - 1)) : (initNowTime.obj.day - 1)) + " " +
initNowTime.obj.hours + ":" + initNowTime.obj.minutes + ":" + initNowTime.obj.seconds; this.endTime = initNowTime.string; this.selectTime(); // 初始化的时候调用一次使得“初始化完组件视图及其子视图之后” startTime 和 endTime 有值 /*下面处理选择的时间*/
let jQuery: any = $;
let that = this;
jQuery("#startTime").datetimepicker({
autoclose: true,
format: "yyyy-mm-dd hh:ii:ss",
minuteStep: 1,
language: "zh-CN",
todayBtn: "linked",
todayHighlight: true,
endDate: (new Date),
zIndexOffset: 1000
}).on("changeDate",function(startTime) {
that.startTime = that.dateTimeFormat(startTime.date).string;
if (Date.parse(that.endTime) - Date.parse(that.startTime) > 31536000000) { // 31536000000 是一年的时间戳
that.startTimeErrorTip = that.endTimeErrorTip == "时间跨度不能大于一年" ? "" : "时间跨度应小于一年";
that.isEnabledSearchBtn = false;
} else if (that.startTime > that.endTime) {
that.startTimeErrorTip = that.endTimeErrorTip == "结束时间不能小于开始时间" ? "" : "开始时间不能大于结束时间";
that.isEnabledSearchBtn = false;
} else {
that.startTimeErrorTip = "";
that.endTimeErrorTip = "";
that.isEnabledSearchBtn = true;
} that.selectTime();
}).data('datetimepicker'); jQuery("#endTime").datetimepicker({
autoclose: true,
format: "yyyy-mm-dd hh:ii:ss",
minuteStep: 1,
language: "zh-CN",
todayBtn: "linked",
todayHighlight: true,
endDate: (new Date),
zIndexOffset: 1000
}).on("changeDate", function(endTime) {
that.endTime = that.dateTimeFormat(endTime.date).string;
if (Date.parse(that.endTime) - Date.parse(that.startTime) > 31536000000) { // 31536000000 是一年的时间戳
that.endTimeErrorTip = that.startTimeErrorTip == "时间跨度应小于一年" ? "" : "时间跨度不能大于一年";
that.isEnabledSearchBtn = false;
} else if (that.startTime > that.endTime) {
that.endTimeErrorTip = that.startTimeErrorTip == "开始时间不能大于结束时间" ? "" : "结束时间不能小于开始时间";
that.isEnabledSearchBtn = false;
} else {
that.startTimeErrorTip = "";
that.endTimeErrorTip = "";
that.isEnabledSearchBtn = true;
} that.selectTime();
}).data('datetimepicker');
}

2. 父组件中使用子组件

  • 模板
<app-date-time-selector (timeInfo)="handle($event)"></app-date-time-selector>

父组件绑定的事件属性同子组件中 EventEmitter 属性名称一样

  • 组件
  // 时间选择器操作事件
handle(value) {
this.startTimeErrorTip = value.startTimeErrorTip;
this.endTimeErrorTip = value.endTimeErrorTip;
this.startTime = value.startTime;
this.endTime = value.endTime;
this.isEnabledSearchBtn = value.isEnabledSearchBtn;
} ngOnInit() { } ngAfterViewInit() {this.offlineRecordList();
}

父组件接收到子组件返回的信息保存在 value 对象中,分别拆分给相应的属性。

最后,当父组件视图和子组件视图完成初始化后,再调用方法,来获取列表数据。

angular 生命周期钩子 ngOnInit() 和 ngAfterViewInit() 的区别的更多相关文章

  1. Angular 个人深究(四)【生命周期钩子】

    Angular 个人深究(四)[生命周期钩子] 定义: 每个组件都有一个被 Angular 管理的生命周期. Angular 创建它,渲染它,创建并渲染它的子组件,在它被绑定的属性发生变化时检查它,并 ...

  2. Angular 5.x 学习笔记(2) - 生命周期钩子 - 暂时搁浅

    Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com ...

  3. Angular组件生命周期——生命周期钩子

    生命周期钩子介绍: 1.ngOnChange:响应组件输入值发生变化时触发的事件. 2.ngOnInit:用于数据绑定输入属性之后初始化组件,在第一次ngOnChange之后被调用. a. 组件构造后 ...

  4. angular生命周期

    概述 angular的组件及指令都有相应的声明周期: 创建, 更新, 销毁, 我们可以通过实现相应的生命周期钩子接口来进入相应的该声明周期的关键时刻 组件生命周期顺序 ngOnChanges: 当组件 ...

  5. Angular4学习笔记(九)- 生命周期钩子简介

    简介 Angular 指令的生命周期,它是用来记录指令从创建.应用及销毁的过程.Angular 提供了一系列与指令生命周期相关的钩子,便于我们监控指令生命周期的变化,并执行相关的操作.Angular ...

  6. Angular2 -- 生命周期钩子

    组件生命周期钩子 指令和组件的实例有一个生命周期:新建.更新和销毁. 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的.比如,OnInit接口的钩子方法叫做ngOnInit. ...

  7. Angular25 组件的生命周期钩子

    1 生命周期钩子概述 组件共有9个生命周期钩子 1.1 生命周期的执行顺序 技巧01:测试时父组件传递对子组件的输入属性进行初始化操作 import { Component, Input, Simpl ...

  8. angular2的生命周期钩子的使用情况

    angular 2 Directive Lifecycleangular2 中组建继承于指令,并扩展了与ui视图相关的属性.angular2 指令的生命周期是用来记录指令从创建,应用及销毁的过程.an ...

  9. Angular生命周期理解

    Angular每个组件,包含根组件和每一级的子组件,都存在一个生命周期,从创建,变更到销毁.Angular提供组件生命周期钩子,把这些关键时刻暴露出来,赋予在这些关键结点和组件进行交互的能力. 在An ...

随机推荐

  1. c#基础学习(0701)之一些简单的方法练习

    一个简单的求数组最大值的方法 //可变参数 int max=GetMaxNumbers(101,30) static int GetMaxNumbers(params int[] pms) { ]; ...

  2. java反射实现接口重试

    工具类: import java.lang.reflect.Method; public class RetryUtil { private static ThreadLocal<Integer ...

  3. [javascript] Promise简单学习使用

    原文地址:http://www.cnblogs.com/dojo-lzz/p/4340897.html 解决回调函数嵌套太深,并行逻辑必须串行执行,一个Promise代表一个异步操作的最终结果,跟Pr ...

  4. [javaSE] 并发编程(线程间通信)

    新建一个资源类Resource 定义成员变量String name 定义成员变量int age 新建一个输入类Input,实现Runnable接口 定义一个构造方法Input(),传入参数:Resou ...

  5. PCA vs Linear Regression 可视化理解

    https://shankarmsy.github.io/posts/pca-vs-lr.html https://shapeofdata.wordpress.com/2013/04/09/princ ...

  6. hdu 2030 统计汉字个数

    汉字统计 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  7. 使用EXCEL 完成分组统计

    表testTable 有以下数据,要统计各个电视剧的数量.在开发人员看来,使用sql操作完成select name,count(*) from TestTable where 1=1 group by ...

  8. wcf远程服务器返回错误404

    最近根据quartz.net 和wcf做资讯内容定时推送,wcf调用的时候出现远程服务器返回错误404,一直找不到原因是什么,客户端和服务器地址和配置都没啥问题,最后发现wcf请求数据,有传输大小限制 ...

  9. Hello world &博客客户端试用

    第一篇博客,使用 open live writer客户端进行测试,下载地址见http://openlivewriter.org/,软件为英文,但配置比较简单,选择“其他博客类型”就ok. 同时安装了语 ...

  10. VC++ 共享内存读写操作

    此解决方案含两个工程文件,一个是写操作工程文件,即把任意字符串写入创建的共享内存里,另外一个读操作工程文件,则是读取共享内存里的数据,从而实现了进程之间的共享内存读写操作. 源码下载