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. mysql和SQLAlchemy

    mysql和SQLAlchemy 一.MySQL分组查询 1.1 MySQL对数据表进行分组查询(GROUP BY) 1.GROUP BY基本语法格式: GROUP BY关键字可以将查询结果按照某个字 ...

  2. sql语句中出现笛卡尔乘积 SQL查询入门篇

    2014-12-29  凡尘工作室   阅 34985  转 95 本篇文章中,主要说明SQL中的各种连接以及使用范围,以及更进一步的解释关系代数法和关系演算法对在同一条查询的不同思路. 多表连接简介 ...

  3. mysql sql语句大全(MySQL语句 整理一)

    1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- 创建 备份 ...

  4. 解决vuejs应用在nginx非根目录下部署时访问404的问题

    以往部署vuejs应用都是直接在nginx的location为/下直接部署,这次遇到要将vue应用部署在/vuejs-admin的非根下,使用以往部署方案直接访问就会404,这时修改步骤如下: 1.修 ...

  5. C#异步,多线程下的HttpContext丢失问题

    1.思路概述 首先让我把大概的一个思路先说一遍吧. 我在一个页面中要同时调用两个接口,而我要给这些接口一些参数:就是我通过HttpContext.Current.Request.QueryString ...

  6. [javaSE] 位运算符(&|^)

    位运算是直接对二进制进行计算 左移 << 右移 >> 先把整数换成四个8bit 0000-0000 0000-0000 0000-0000 0000-0000 这个二进制左右移 ...

  7. Java基础——JDBC

    今天学习的内容是:JDBC 通常jdbc连接分6步: 1)注册驱动: 2)建立连接: 3)创建Statement: 4)执行sql 语句: 5)处理结果集(若sql 语句为查询语句): 6)关闭连接. ...

  8. 基于 vue+element ui 的cdn网站(多页面,都是各种demo)

    前言:这个网站持续更新中...,有网上预览,github上也有源码,喜欢记得star哦,欢迎留言讨论. 网站地址:我的个人vue+element ui demo网站 github地址:yuleGH g ...

  9. 莫名其妙的标记之@noescape

    Swift 中经常遇到一些不熟悉的关键字, 例如@autoclosure, @noescape...等等, 为什么要加这样的关键字, 我自己写方法的时候什么时候要加, 什么时候不加, 都是应该考虑的问 ...

  10. JavaSE——转换流和缓冲流

    转换流: 类 InputStreamReader(字符输入转换流): InputStream 即读取字节流,Reader 为读取字符流. InputStreamReader将字节流转换成字符流.便于一 ...