"angularJS"栏目下的所有文章

angular2+数据更新但视图不更新的解决方法

最近项目中总是遇到一些莫名其妙的问题,当然这个项目已经存在已久,之前也有过这样的问题,现在感觉问题总是显得很突出,大部分问题都是由于数据更新后,视图无法及时更新而导致的,由于项目的代码原因,我就不多去深入为什么会发生这个问题了,主要的是说一下解决这个问题的方法。
场景
如果你在组件中定义了一个变量,当你使用console能将其值打印出来,可是我们能看到的视图中,这个变量并没有任何值或者改动。又或者你在一个点击事件中去改变相关变量的值,让其显示在视图上,但是当你点击事件触发后,变量的值是改变了,但是视图却为更新。这个时候你就可以使用以下几种方法

1、直接使用ngZong.run()

我们可以将某个要发生改变的变量或者方法直接放到ngZong.run()中。比如:
ngZong.run(()=>{this.closeNum()})

2、ChangeDetectorRef.detectChanges()

此方法本人使用的不多,并没有切确的深入了解这个方法,而且我在进行测试中,这个方法对我来说并未产生任何效果,如果你想要尝试一下,建议看一下官方文档https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

3、直接使用ngDocheck()生命周期

我们可以将相关代码直接放到ngDocheck中,即可实现视图强制更新。但是一定要注意ngDocheck特别像setInterval,不论你数据是否发生改变他都会执行,并且任意一个事件都有可能触发它。因此得需要慎用,以防影响到性能

angular2+使用iframe展示外链提示unsafe value used in a resource URL context解决方法

2017/06/23angularJS 标签:0

iframe在web项目中确实很少使用,但是在手机app中,很多人可能会使用到今天我在使用的过程中就出现了错误unsafe value used in a resource URL context,这个错误后面还跟了一个短网址,打开后就跳转到了angular.io的官方网站去了,大概是到了这里:https://angular.io/guide/security#xss,如果你英文水平不错,应该看看这个页面就会解决了吧!如果你懒得去官方研究那些难懂的英文,那么久跟着我一起来处理吧!
1、场景
比如说注册页面,需要用户同意相关法律法规以及注册条款等,因此就需要将相关的条款展示出来,一般的做法就是后端给出json数据或者其他类型的数据,让前端去调用。但是如果是一个简单的页面,那就没有必要进行数据库存储的话,那就直接在iframe中嵌入这个外部的url即可。
2、使用过程
如果不在ts中写url,直接在iframe的src中写url,我完全没有问题的,并且不会提示任何错误。但是由于之前我写了一个config.ts将所有的配置都放到了里面,包括url,因此我只能通过下面的方法进行实现!=
一般人会这样去使用url
import ......
public thisUrl = "http://www.egtch.com";
html模板中这样使用 阅读更多

angular2中如何制作如同input search的清空功能

2017/06/22angularJS 标签:0

使用过jQuery的童鞋,想要制作一个清空input内容的图标按钮是非常简单的事情,但是今天我要来说下angular2+版本中制作如此一个功能,远远比jQuery简单得多。而且是超级简单,根本不用写typescript代码,仅在html模板中就可以直接实现,当然我们也可以通过typescript的代码来进行实现,大同小异啊!
先来看实现后的大致功能效果,如下图: 阅读更多

angular2或4 获取checkbox的值

2017/06/22angularJS 标签:0

在一个项目中需要使用到这个功能,看了下官方的文档,说得不是很清楚,使用了formArray,但是没有实现成功。然后谷歌、百度了好久,也没有找到可以真正运行的代码,差点就放弃了。功夫不负有心人,在segmentfault上提问后,得到了相关回答,但是回答中得到了一个外国人博客上的文章,对照着改写了一番,感觉真的就这么实现了,真好,实现得和自己想要的最终结果一模一样。下面就来说说如何进行实现吧!
首先说下实现的逻辑思路,通过FormBuilder, FormGroup, FormArray来获取checkbox的选中状态,然后通过这些选中状态再去获得checkbox的值,再将想要的值展示出来即可。
1、导入相关功能模块

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import 'rxjs/add/operator/map';

2、创建checkbox数据源

public select = [
    {"name":"leo","selected":true,"sex":"男"},
    {"name":"Lily","selected":false,"sex":"女"},
    {"name":"Tony","selected":false,"sex":"男"}]

阅读更多

share

AD