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，不过确实是有效的