angular4&&ie9踩坑日记

发布时间:2019-06-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了angular4&&ie9踩坑日记脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本文旨在总结项目中所遇到的兼容性大坑,所以可能是遇到什么就随手写下来,没什么连贯性,还请见谅

ie9中不支持deleteEvent事件

在ie9中,对于表单的校验可能会遇到的一个问题是,delete, backspace等删除操作,并不会触发Angular的表单校验,并且表单对象中的值也不会有任何更新,所以做了如下简陋的兼容性处理

     deleteEvent(event, formControlName) {
            this.form_data.get(formControlName).setValue(event.target.value);
            this.form_data.updateValueAndValidITy();
    
        }

因为项目中只有一两个页面需要兼容ie9,所以并没有做统一的处理,只是提供一种解决这个问题的思路。

ie9中的路由问题

这个问题涉及到东西比较多,先总结下问题出现的原因
首先,ng中js文件,图片等的寻址路径,是依靠index.htML中的base标签的

    <base href="/">

虽然w3c官方是说base标签几乎兼容所有浏览器,但是对于ie9来说,他对base标签的支持是不完整的.
ie9只支持完整域名的base标签,也就是

    <base href="www.baidu.COM">

而对于根路径或者相对路径的写法,ie9是无法识别的,所以造成了一个问题是
从a路由进入a/b路由后,b模块的js文件会在root/a/b这个路径下去加载,所以就直接404了.因为所有的js文件其实都是挂载在root或者某个我们指定的文件夹下的。

如果域名是固定的,那固然可以将href写成静态的,这是可以符合我们的预期的,但是很多情况下,一个项目可能会在开发,预发布,正式等很多环境下跑,那我们就需要不同的base配置,但因为base是html标签,其中是不能使用变量的,所以对于这种动态域名的情况,解决办法是使用hash路由

localhost:4200/#/app

上面这种路有就是hash路由,浏览器会识别到#作为一个特殊的标识符,即使#后面的地址发生变化时,不会对寻址路径产生影响,这需要ng的router配置配合

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: true})],
  exports: [RouterModule],
})

ng的官网中对hash路由的优劣做了很多描述,在此不做陈述
https://www.angular.cn/guide/...
其中有提到一点是,关于路由策略的选择,应该早期构建阶段就决定,因为后期想更改的话可能会涉及到大量的修改,但是在我做的实际项目中发现,对于普通的路由跳转,因为层级关系,或者相对路径,路由策略对其不会造成什么影响,但是对于完整域名的跳转,比如
window.open(localhost:4200/#/app)和
window.open(localhost:4200/app)
这种情形是一定要手动改掉的

当然,还有一种更省事的方法,让后端做个重定向就可以了,当然这有点甩锅23333,不过确实是有效的

脚本宝典总结

以上是脚本宝典为你收集整理的angular4&&ie9踩坑日记全部内容,希望文章能够帮你解决angular4&&ie9踩坑日记所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。