分类
angular

angular 不安全的url

当angular 引用外部的url 有时候会报错,比如在iframe 中嵌入了外部url

通用一点的做法是新建一个pipe 用来让url 变为安全 。

代码如下

Safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})

export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}

module中引入

import { SafePipePipe } from ‘./SafePipe.pipe’;

@NgModule({
   imports: [
    
   ],
   declarations: [
      ...
      SafePipePipe
   ],
   entryComponents: [
    
   ],
   exports: [
     
   ]
})

HTML 中使用

 <iframe [src]=”url | safe”></iframe>

分类
angular 技术

记一次写TS时,遇到的坑

当有时候想要创建一个 [[],[],[]]的时候,你会用什么方式尼?

[...Array(3)].fill([]);

[...Array(3)].map(i=>[]);

亦或者会想到

Array(3).fill(0).map(i=>[])

来给大家比较下这三个的区别

[...Array(3)].fill([]);

有坑,相信不少人也遇到过,具体的表现 可以看一下这段代码

var b = [...Array(3)].fill([]);
b[0].push('qiupu'); 
console.log(b);
// 0: ["qiupu"]
// 1: ["qiupu"]
// 2: ["qiupu"]

这个就不再多解释了,看不懂的可以加下群768901972

[...Array(3)].map(i=>[]);

在JS里写的时候是没有问题的,

var a = [...Array(3)].map(i=>[]); 
a[0].push('qiupu');
console.log(a);
// 0: ["qiupu"]
// 1: []
// 2: []

Array(3).fill(0).map(i=>[])

这个看着和上面那个没什么区别,就多了一次fill(0),那他的意义是什么,就是先填充0,避免了 TS 在转译目标为ES5的 将他编译为 Array(20).slice().map(function (i) { return []; })

这篇文章主要是告诉大家,目前的TS的转译可能还存在一定的问题,使用的时候,应该注意下,特别是空值的处理之类的,希望能帮到你

提供一个在线测试工具,方便没有TS环境

分类
angular

angular run build -prod 提示内存不足

一般来说尼,这个问题比较少见,但是如果是angular cli 的话

node –max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build –prod –aot

这行命令就可以解决了,注意只能解决angular的问题,其他框架的话原理一致,设置最大使用的内存,设的大一点就好

分类
angular 小技巧

base64 转为blob 触发下载

/**
   * base64转为blob然后触发下载
   */
  base64toBlob(base64: string, filename: string, contentType = 'application/msword') {
    const url = `data:${contentType};base64,${base64}`;
    // console.log(url);
    fetch(url).then(res => res.blob())
      .then(blob => {
        const aTag = document.createElement('a');
        aTag.download = filename;
        aTag.href = URL.createObjectURL(blob);
        aTag.click();
        // 调用此方法,让浏览器知道不再保留对文件的引用。
        URL.revokeObjectURL(aTag.href);
      });
  }
分类
angular 小技巧

搜索输入框 延迟搜索

延迟搜索,当input输入框值变化时,延迟1秒发送请求,若期间再次输入,则清空定时器

let btnsleep;
OnSearch(e) {
    clearTimeout(this.btnsleep);

    this.btnsleep = setTimeout(() => {
      this.inspectionService.getDocNoList(e).then(
        (data: any) => {
          this.DocNoList = data;
        });
    }, 1000);
  }
分类
angular ionic

基于安卓平台 JS 与 Java 互操作 (采用ionic4/angular6技术)

背景:安卓中的 webView 要求实现 内嵌的 js 调用 安卓APP的方法 与并且支持安卓回调js代码  来实现。

WebView部分

webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView"); //重要的


Java部分

@SuppressLint({“SetJavaScriptEnabled”, “AddJavascriptInterface”})
class JsInterface {
private Context mContext;

public JsInterface(Context context) {
this.mContext = context;
}

@JavascriptInterface
public String getName(){
return getUser();
}

@JavascriptInterface
public String getPass(){
return getPass();
}



Js部分

function loading(){
var name=window.AndroidWebView.getName()
var pass=window.AndroidWebView.getPass()//调用java方法
$.post(“101.111.11:800”,{remark:name,password:pass},function(result){
var obj=result;
if(obj.code==100){
toast(“登录成功”);
}else{
toast(“登录失败”);
}
});
}



来源: https://blog.csdn.net/u014548562/article/details/77916409 

以上是我看博客的时候看到的,在angular中 我直接在html中写,发现不可以传变量过去,
例如:

<input onclick=”window.callJava.functionz(‘string’)”></input>

<input onclick=”window.callJava.functionz(parmString.toSring())”></input>

后来发现需要在ts代码中这样使用才可以。

相关文章链接:
1.Java执行JavaScript代码http://www.jb51.net/article/81577.htm

2.JAVA执行javascript方法http://blog.csdn.net/jianggujin/article/details/51046122

3.如何在java中调用js方法http://www.cnblogs.com/langtianya/archive/2012/09/18/2690860.html

分类
angular ionic

TS中报错说style在element类型中不存在怎么办

这是typescript的类型检查导致的,需要在你的querySelectorAll方法前面加个类型断言就好了,如下

let block = document.querySelectorAll(".block"as NodeListOf<HTMLElement>;

参考
https://segmentfault.com/q/1010000011796234/a-1020000011796986

分类
angular ionic

ionic4 ios的列表出现显示慢 卡住的情况

<一句话教程>不要使用angular的管道,特别是列表中,推荐使用

{{CrtDate.substr(0,10)}}

替换

{{CrtDate| date:’yyyy-MM-dd’}}
分类
angular ionic

ionic4 新建angular风格的项目

ionic start myApp tabs --type=angular
分类
angular ionic

ionic 启动速度优化

启动白屏可以config.xml添加这个手动控制转圈圈的关闭

然后
app.component.ts中添加
platform.ready().then(() => {
(window).navigator.splashscreen.hide();

}

在准备就绪后手动关闭

设置超时时间 防止应用挂

<preference name=”SplashScreenDelay” value=”10000″/>
<preference name=”loadUrlTimeoutValue” value=”700000″/>

最重要的使用这个参数

ionic build android --prod --release

最后
通过抓包工具分析加载的时候下载了哪些包,外部JS等可以下载放在本地,可以有效降低用户网不好导致的启动慢

参考:https://blog.csdn.net/u010564430/article/details/61201769