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. PHP中oop面向对象基础知识(一)

                                                                                        OOP 基础知识汇总(一) &g ...

  2. [日常] PHP设置 include_path 配置选项

    动态设置php.ini中的include_path 配置选项: 两种方式set_include_path($new_include_path)ini_set('include_path',$new_i ...

  3. Runtime初识

    什么是Runtime   我们写的代码在程序运行过程中都会被转化成runtime的C代码执行,例如[target doSomething];会被转化成objc_msgSend(target, @sel ...

  4. Java泛型类型

    E element 常用于集合中表示存放元素 T type Java类 K key 键 V value 值 N number 数值类型 ? 不确定的类型 一种约定俗成吧

  5. item2 快捷键

    快捷键 ⌘ + Click:可以打开文件,文件夹和链接 ⌘ + n:新建窗口 ⌘ + t:新建标签页 ⌘ + w:关闭当前页 ⌘ + 数字 & ⌘ + 方向键:切换标签页 ⌥⌘ + 数字:切换 ...

  6. Golang beego ORM + CRUP 操作详解

      构建beego Web 项目         首先构建一个beego 的web 项目,这个我们完全可以参考beego 官网中的开发文档,上面介绍的非常的详细,在这我就不给大家介绍,主要是介绍ORM ...

  7. C#设计模式--命令模式(学习Learning hard C#设计模式笔记)

    原文地址http://www.cnblogs.com/zhili/p/CommandPattern.html class Program { static void Main(string[] arg ...

  8. thinkPHP的几个系统常量

    echo "当前请求:" . __SELF__ . '<br>'; echo "当前分组:" . __MODULE__ . '<br>' ...

  9. oracle 分组取第一行数据 ,查询sql语句

    oracle  分组取第一行数据 SELECT * FROM ( SELECT ROW_NUMBER() OVER(PARTITION BY x ORDER BY y DESC) rn, t.* FR ...

  10. java 对象

      对象可以看成是静态属性和动态属性的封装体.静态属性——成员变量:动态属性——方法. 1.汇编语言是对机器语言的抽象. 2.面向过程的语言是对汇编语言的抽象.属性和方法分离,不是封装在一起的,复用性 ...