Angular でブラウザの互換性の問題を解決する方法の紹介

angular におけるブラウザの互換性の問題を解決するにはどうすればよいですか?次の記事で紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

関連チュートリアルの推奨事項: 「angular チュートリアル」

質問: エッジブラウザの下で、固定列の境界線が消えます

原因: ng-zorro-antd テーブル コンポーネントは、nzLeft および nzRight 命令を使用してテーブル列を固定しますこれら 2 つの手順 css3 にタグを実装します:

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

Google、Firefox、および -webkit-kernel ブラウザはすべて、この属性 (css3) をサポートしています。IE はこの属性をサポートしていないため、IE では自動的にダウングレードされ、テーブルは空になります。固定列、スライド可能なフォーム。
Edge ブラウザは 1703 以降のバージョンで chromium カーネルを使用しており、CSS3 属性のサポートが強化され、sticky 属性もサポートされています。テーブル列を使用して固定することはできますが、境界線は表示されなくなります。

解決策:
現在実現可能な解決策は次のとおりです:

1. 固定列を使用しないでください。固定列を使用するための明示的な要件はないため、テーブルを固定するために nzLeft および nzRight の使用を放棄できます。これにより、表示効果がブラウザ間で一貫したものになります。

   Edge ブラウザのダウングレード処理の場合、効果は IE ブラウザと同じで、固定列はなく、全体を水平にスクロールできます。

2. 固定列の実装をカスタマイズします。コンポーネントの固定列の実装は使用せず、position:Absolute; を使用してテーブルの固定列を実装します。

2 番目のプランの詳細なプロセスは次のとおりです:

Use p を使用してテーブルをラップします。テーブルの幅が p の幅を超える場合、スクロールを有効にします:

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

テーブルの場合、外側の p 幅を超える幅を指定できます (スクロール効果が確認できるようになります)。

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

最後で最も重要な問題は、固定列の実装です。それは非常に簡単です。テーブルの列を絶対位置に設定します。絶対位置を設定した後、列は元のドキュメントから分離されます。テーブル 欠落している列が 1 つあるため、テーブルにこの固定列の場所を確保できるように背景パネルを追加する必要があります。

HTML コードは大まかに次のとおりです。この固定列は、固定列のスタイルにすることも、背景パネルのスタイルに設定することもできます。デモでは、これを使用して、固定列のスタイル。

<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) 確認ボタンを2 回クリックしました

原因: まだ明確ではありません

解決策:

1. コンポーネントのバージョンをアップグレードします 現在、この問題は ng-zorro-antd 8.5 以降のバージョンでは発生しません。
2. カスタム フッター OK 機能を置き換える追加のフッターを追加します。これを実現するには 2 つの方法があります:
   現時点では、OK ボタンなどの対応するボタンのみをカバーします。 、ボタンのスタイルはデフォルトのフッター ボタンと一貫性がありません。一貫性を維持するには、スタイルをカスタマイズするか、デフォルトのフッターのボタンのスタイルを直接使用できます。次の例では、コンポーネント ライブラリのスタイル: ant-calendar -ok-btn、2 番目のステップは、元のボタンを上書きすることです。絶対位置を使用して上書きを実現できます:

<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ブラウザで複数のタブページを切り替えると、echartが配置されているコンテナの高さが崩れます

原因: 親要素の高さはIEブラウザでは動的に調整できません(つまり、高さは子要素を通じて動的に変更されます)

##解決策: echartチャートが配置されているコンテナの高さを修正しました

---

## 問題 #: IEブラウザでは、フォームが初期化されると、フォーム検証がトリガーされます

原因 : これは IE の問題です。IE10 は入力イベントを実装しますが、トリガー時間が間違っています。たとえば、プレースホルダーが変更されると、プレースホルダーのテキストが英語でない場合にトリガーされます。Edge15 ではこの問題が修正されましたが、IE ではこの問題が修正されない可能性があります。 ＃＃＃＃＃＃＃＃＃＃＃＃解決＃＃＃＃＃＃：＃＃＃

1. 使用表单的reset()重置表单，但是重置的操作需要放在setTimeout中，或者通过其他手段将重置的操作作为表单初始化时的最后一个宏任务执行。这种方式经验证，最终的效果是，初始化表单后，表单输入元素的边框闪烁（红色）一下。
2. 使用自定义的服务商插件（较为推荐），这种方式对原有代码的破坏性小（遵循了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编码（不可以）

更多编程相关知识，请访问：编程入门！！

以上がAngular でブラウザの互換性の問題を解決する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。