angula中使用iframe点击后不执行变更检测的问题


Posted in Javascript onMay 10, 2020

这个问题是上周的,当时觉得这个问题的解决办法太简单了,不用写博客记录,但是潘老师今天今天又遇到了需要使用这个的地方,感觉问题虽然不难,但是,写篇博客,方便自己查询,也给了其他人搜索到解决办法的机会。

问题描述

项目中使用到了ifame,理想状态是:当点击ifame中的按钮时,将会调用通过angular写的一个函数,函数将会修改一个ngif的判断条件,显示一个弹窗,

但现实是:当点击ifame中的按钮时,将会调用通过angular写的一个函数,函数将会修改一个ngif的判断条件,然后就没有然后了.

angula中使用iframe点击后不执行变更检测的问题 

开始的时候自己直接懵了, 方法确实执行了, 但界面没修改, 问了问潘老师, 潘老师说看看生命周期函数是否执行了, 果然, 所有的生命周期函数都没有调用。

解决办法

既然生命周期函数没调用,我们让他调用不就行了,值已经变化了,但是界面不变化,说明,angular 不知道值变化了,所以我们可以让angular 主动进行变更检测,让它知道已经发生了变化。

对此我们可以使用 ChangeDetectorRef

变化监测类 - ChangeDetectorRef

Angular 在整个运行期间都会为每一个组件创建 ChangeDetectorRef 的实例,该实例提供了相关方法来手动管理变化监测。有了这个类,我们自己就可以自定义组件的变化监测策略了,如停止/启用变化监测或者按指定路径变化监测等等。

它有以下方法:

  • markForCheck():把根组件到该组件之间的这条路径标记起来,通知Angular在下次触发变化监测时必须检查这条路径上的组件。
  • detach():从变化监测树中分离变化监测器,该组件的变化监测器将不再执行变化监测,除非再次手动执行reattach()方法。
  • reattach():把分离的变化监测器重新安装上,使得该组件及其子组件都能执行变化监测。
  • detectChanges():手动触发执行该组件到各个子组件的一次变化监测。

所以,我们可以使用 detectChanges() 来达到目标

使用方法

// 在组件中注入
 constructor(private changeDetectorRef: ChangeDetectorRef) {
 }
 
 // 直接使用
 test() {
 this.changeDetectorRef.detectChanges()
 }

angular何时进行变化检测

总结起来, 主要有如下几种情况:

  • 用户输入操作,比如点击,提交等
  • 请求服务端数据(XHR)
  • 定时事件,比如 setTimeoutsetInterval

Angular并不是捕捉对象的变动,它采用的是在适当的时机去检验对象的值是否被改动,这个时机就是这些异步事件的发生。

这个时机是由 Zone.js 去掌控的,它获取到了整个应用的执行上下文,能够对相关的异步事件发生、完成或者异常等进行捕获,然后驱动 Angular 的变化监测机制执行。

Zone.js的作用

实际上 Zone,js 有一个叫猴子补丁的东西。在 Zone.js 运行时,就会为这些异步事件做一层代理包裹,也就是说Zone.js运行后,调用 setTimeout、addEventListener 等浏览器异步事件时,不再是调用原生的方法,而是被猴子补丁包装过后的代理方法。代理里setup了钩子函数, 通过这些钩子函数, 可以方便的进入异步任务执行的上下文

//以下是Zone.js启动时执行逻辑的抽象代码片段
function zoneAwareAddEventListener() {...}
function zoneAwareRemoveEventListener() {...}
function zoneAwarePromise() {...}
function patchTimeout() {...}
window.prototype.addEventListener=zoneAwareAddEventListener;
window.prototype.removeEventListener=zoneAwareRemoveEventListener;
window.prototype.promise = zoneAwarePromise;
window.prototype.setTimeout = patchTimeout;

关于 Zone.js 的详细内容可以看 这篇文章 。

angular变化检测策略

angular 提供了两种变更检测策略,除了上述得Default外还有一种 OnPush 的检测机制

OnPush 与 Default 之间的差别: 当检测到与子组件输入绑定的值没有发生改变时,变化检测就不会深入到子组件中去 。

一个OnPush的例子

app.comonent.ts

@Component({
 selector: 'app-root',
 template: `
 <h1>{{title}}</h1>
 <h2>user.name: {{user.name}}</h2>
 <button type="button" (click)="changeUserName()"> 改变属性
 </button>
 <button type="button" (click)="changeUserObject()">
  改变对象
 </button>
 <app-test [user]="user"></app-test>
 `,
})
export class AppComponent {
 title = 'OnPush Demo';
 user: User = new User({name: 'yunzhi'});

 changeUserName() {
 this.user.name = 'new name';
 }

 changeUserObject() {
 this.user = new User({name: 'new user'});
 }
}

test.component.ts

@Component({
 selector: 'app-test',
 template: `
 <div>
  <h3>test 组件</h3>
  <p>
  <label>User:</label>
  <span>{{user.name}}</span>
  </p>
 </div>`,
 // 使用OnPush模式只需要加上下面这段代码
 changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestComponent implements OnInit {
 @Input() user: User;

 constructor() {
 }

 ngOnInit() {
 }

}

这时当我们点击改变属性按钮时test组件显示的并不会变化,只有改变user得引用test组件显示的才会变化,如下图所示

angula中使用iframe点击后不执行变更检测的问题

总结

本来以为这个问题没什么可写的,直接解决好像就完事了,但没想到写着写着感觉能写的越来越多,比如 变更检测的顺序 ,还有 ExpressionChangedAfterItHasBeenCheckedError 都是应该知道的问题,但是感觉这些和主题又没有什么关系,想了想还是算了。

到此这篇关于angula中使用iframe点击后不执行变更检测的问题的文章就介绍到这了,更多相关angula iframe 变更检测内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
jsPDF导出pdf示例
May 02 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
深入理解vue Render函数
Jul 19 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
JavaScript 装逼指南(js另类写法)
May 10 #Javascript
js中!和!!的区别与用法
May 09 #Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 #Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 #Javascript
js根据后缀判断文件文件类型的代码
May 09 #Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 #Javascript
JS原形与原型链深入详解
May 09 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
使用Javascript和DOM Interfaces来处理HTML
2006/10/09 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
2019/09/18 Javascript
TypeScript之调用栈的实现
2019/12/31 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python分割列表(list)的方法示例
2017/05/07 Python
python数据处理实战(必看篇)
2017/06/11 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
Python 实现try重新执行
2019/12/21 Python
基于python3实现倒叙字符串
2020/02/18 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
年度考核自我鉴定
2014/02/02 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
应聘护士求职信
2014/07/21 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
初中作文评语集锦
2014/12/25 职场文书
刑事上诉状(无罪)
2015/05/23 职场文书
浅谈Redis跟MySQL的双写问题解决方案
2022/02/24 Redis