本文旨在总结项目中所遇到的兼容性大坑,所以可能是遇到什么就随手写下来,没什么连贯性,还请见谅
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)
这种情形是一定要手动改掉的