解决angular中的阅读器兼容性问题的办法介绍-百分百源码网

解决angular中的阅读器兼容性问题的办法介绍

发布时间：12/01 来源：未知浏览：关键词：

angular中的阅读器兼容性问题如何解决？下面本篇文章给大家介绍一下。有必然的参照价值，有需要的伴侣可以参照一下，但愿对大家有所帮忙。

相关教程引荐：《angular教程》

问题：edge阅读器下，牢固列的边框消逝

缘由：ng-zorro-antd表格组件使用nzLeft和nzRight指令牢固的表格列，这两个指令的实现css3中的标签：

position: -webkit-sticky !important;
position: sticky !important;

谷歌、火狐及-webkit-内核的阅读器均支撑该属性（css3），IE不支撑该属性，所以在IE中，会主动落级，表格无牢固列，可滑动的情势。
Edge阅读器在1703之后的版本使用了chromium内核，对css3的属性支撑较好，也支撑sticky属性，可以使用，可以牢固表格列，但边框会消逝。

解决方案：
当前可行的解决方案有如下几种：

不使用牢固列，若产品没有明白要求使用牢固列，可以舍弃使用nzLeft及nzRight来牢固表格。从而使各个阅读器下的展现结果一致。
针对Edge阅读器落级处置，与IE阅读器结果一致，无牢固列，团体可横向滚动。
自定义实现牢固列，不使用组件的牢固列实现，通过使用position: absolute;这种方式来实现表格的牢固列。

第二个方案的具体历程如下：

使用p包裹表格，当表格宽度超越p宽度时，开启滚动：

.scroll-table {
  width: 100%;
  overflow-x: scroll;
}

针对表格，我们可以指定宽度，让其超越外层p宽度（这样可以看到滚动结果）。

.fixed-table {
  width: 1300px; /* 可由th，td动态扩大，也可指定宽度 */
  border-collapse: collapse;
}

最后一个最中心的问题，就是牢固列的实现了，非常简便，将表格的一列设定成绝对定位,在设定了绝对定位后，该列会离开本来的文档流，表格少了一列，所以需要加一个背景板来包管表格能够给这个牢固列留出一个位置。

HTML代码大致如下，这个fixed-col可认为牢固列的样式，也可以设定成背景板的样式，demo中是用其指定了牢固列的样式。

<p class="scroll-table">
    <table class="fixed-table">
        <thead>
            <tr>
                <th>无效背景板</th>
                <th class="fixed-col">牢固列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>无效背景板</td>
                <td class="fixed-col">牢固列</td>
            </tr>
        </tbody>
    </table>
</p>

参照代码：Ironape

问题：Edge阅读器的日历（nz-range-picker）确定按钮需要点两次

缘由：尚未明白

解决方案：

升级组件版本，当前ng-zorro-antd 8.5之上的版本未见这个问题。
自定义页足，参加额外的页足，来替换肯定功效，此时有两种方式来实现：
只覆盖对应的按钮，如肯定按钮，此时按钮的样式与默许的页足按钮是不一致的，为保持一致，可以自定义样式，也可以直接使用默许页足中按钮的样式，下例中选中直接使用组件库的样式：ant-calendar-ok-btn，第二步则是覆盖本来的按钮，可以使用绝对定位的方式来实现覆盖：

<nz-range-picker [nzRenderExtraFooter]="renderExtraFooterTpl">
<ng-template #renderExtraFooterTpl>
  <p>
    <button nz-button nzType="primary" class="ant-calendar-ok-btn abs-right">确 定</button>
  </p>
</ng-template>

对应css：

.abs-right {
  position: absolute;
  right: 12px;
  top: 7px;
  z-index: 1;
  box-shadow: none;
}

删除默许页足，完全自定义实现页足。此时需要删除本来的页足，可通过：

::ng-deep .ant-calendar-footer-btn {
  display: none;
}

这种方式删除默许页足，此时额外的页足不成使用绝对定位。

问题：IE阅读器下，在多个tab页中切换，echart所在容器高度坍塌

缘由：IE阅读器下父元素不克不及动态调整高度（即通过子元素动态改动调整高度）

解决方案：牢固echart图表所在的容器高度

问题：IE阅读器下，初始化表单时，触发布单验证

缘由：这个是IE的问题，IE10+实现了input事件，但是触发的时机却是错误的。比方在placeholder改动时，placeholder的文字不是英语的时候就会触发，Edge15+修复了这个问题，但是IE大概永久都不会修复这个问题。

解决方案：

使用表单的reset()重置表单，但是重置的操纵需要放在setTimeout中，或者通过其他手段将重置的操纵作为表单初始化时的最后一个宏任务施行。这种方式经历证，终究的结果是，初始化表单后，表单输入元素的边框闪耀（红色）一下。
使用自定义的效劳商插件（较为引荐），这种方式对原有代码的毁坏性小（遵照了OCP原则），该插件是由DerSizeS供给的。只需要在对应的module中增添一个效劳商即可

@NgModule({
    providers: [{
        provide: EVENT_MANAGER_PLUGINS, multi: true,
        useClass: UniqueInputEventPlugin, deps: [UNIQUE_INPUT_EVENT_PLUGIN_CONFIG],
    }]    
})
class MyModule {}

需要留意的是，插件需要本人增加到项目文件中（按照angular团队所说，这个插件修复了一个IE10或者IE11的bug，但是提交了太多的代码，这会给增添现有的利用的打包体积，虽然后面关于这个PR计议了挺久，但是看模样是预备把这个放到FAQ里面，而不会把他并入框架），并在对应的模块中援用。

另注：IE的输入框会由于placeholder为中文而触发布单验证，placeholder改动了也会触发布单验证，所以，有一个讨巧的办法，placeholder里面的内容写成英文情势(引荐），但这明显不相符中文产品的需求，并且这明显没有国际化。所以可以想方法绕过这一条，使用 HTML实体（已验证，可行），Unicode编码（不成以）

打赏