angular4&&ie9踩坑日记

前端之家收集整理的这篇文章主要介绍了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,不过确实是有效的

猜你在找的Angularjs相关文章