Introduction aux méthodes pour résoudre les problèmes de compatibilité des navigateurs dans Angular

Comment résoudre le problème de compatibilité du navigateur dans

angular ? L’article suivant vous le présentera. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations de tutoriel associées : "tutoriel angulaire"

Question : bord Sous le navigateur, les bordures des colonnes fixes disparaissent

Cause : Le composant table ng-zorro-antd utilise les instructions nzLeft et nzRight pour corriger les colonnes du tableau. Ces deux instructions Implémentent les balises en CSS3 :

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

Les navigateurs Google, Firefox et -webkit-kernel prennent tous en charge cet attribut (css3 ne prend pas en charge cet attribut, donc dans IE, il sera automatiquement rétrogradé et le). le tableau sera vide. Colonne fixe, formulaire coulissant.
Le navigateur Edge utilise le noyau Chrome dans les versions postérieures à 1703, qui prend mieux en charge les attributs CSS3 et prend également en charge l'attribut sticky. Il peut être utilisé et corriger les colonnes du tableau, mais la bordure disparaîtra.

Solution :
Les solutions actuellement réalisables sont les suivantes :

1. Ne pas utiliser de colonnes fixes Si le produit If. il n'y a aucune exigence explicite d'utiliser des colonnes fixes, vous pouvez abandonner l'utilisation de nzLeft et nzRight pour corriger la table. Cela rend l’effet d’affichage cohérent entre les navigateurs.

   Pour le traitement de rétrogradation du navigateur Edge, l'effet est cohérent avec le navigateur IE, il n'y a pas de colonnes fixes et le tout peut défiler horizontalement.

2. Personnalisez l'implémentation de la colonne fixe, n'utilisez pas l'implémentation de la colonne fixe du composant et implémentez la colonne fixe de la table en utilisant position: absolute;.

Le processus détaillé de la deuxième solution est le suivant :

Utilisez p pour envelopper le tableau Lorsque la largeur du tableau dépasse la largeur de p, activez le défilement :

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

Pour le tableau, nous pouvons spécifier une largeur qui dépasse la largeur p externe (afin que vous puissiez voir l'effet de défilement).

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

Le dernier et le plus important problème est l'implémentation de colonnes fixes. C'est très simple de définir une colonne du tableau en positionnement absolu. Après avoir défini le positionnement absolu, la colonne sera séparée du document d'origine. flow. Le tableau Il manque une colonne, il faut donc ajouter un panneau d'arrière-plan pour garantir que le tableau puisse laisser une place pour cette colonne fixe.

Le code HTML est à peu près le suivant. Ce col fixe peut être le style d'une colonne fixe, ou il peut être défini sur le style du tableau d'arrière-plan. Dans la démo, il est utilisé pour spécifier le style. style de la colonne fixe.

<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>

Code de référence : Ironape

---

Problème : Le bouton de confirmation du calendrier (nz-range-picker) du navigateur Edge doit être cliqué deux fois

Cause : Pas encore clair

Solution :

1. Mettre à niveau la version du composant Actuellement, ce problème ne se produit pas dans les versions supérieures à ng-zorro-antd 8.5.
2. Personnaliser le pied de page et ajouter un pied de page supplémentaire pour remplacer la fonction OK. Il existe deux manières d'y parvenir : ne couvre que le bouton correspondant, comme le bouton OK, À. cette fois, le style du bouton n'est pas cohérent avec le bouton de pied de page par défaut. Pour maintenir la cohérence, vous pouvez personnaliser le style ou utiliser directement le style du bouton dans le pied de page par défaut. Dans l'exemple suivant, vous choisissez d'utiliser directement le style de. la bibliothèque de composants : ant-calendar -ok-btn, la deuxième étape consiste à écraser le bouton d'origine. Vous pouvez utiliser le positionnement absolu pour réaliser l'écrasement :
   

<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 correspondant :

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

Supprimez le pied de page par défaut, Pied de page entièrement personnalisable. À ce stade, vous devez supprimer le pied de page d'origine. Vous pouvez supprimer le pied de page par défaut via :

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

Pour le moment, le pied de page supplémentaire ne peut pas utiliser le positionnement absolu.

---

Problème : Dans le navigateur IE, lors du basculement entre plusieurs pages à onglets, la hauteur du conteneur où se trouve l'echart s'effondre

Raison : La hauteur de l'élément parent ne peut pas être ajustée dynamiquement dans le navigateur IE (c'est-à-dire que la hauteur est modifiée dynamiquement via les éléments enfants)

Solution : Correction de la hauteur du conteneur où se trouve le graphique echart

---

Problème : Dans le navigateur IE, lors de l'initialisation du formulaire, la validation du formulaire est déclenchée

Cause : Il s'agit d'un problème avec IE10+ qui implémente l'événement d'entrée, mais l'heure de déclenchement est erronée. Par exemple, lorsque l'espace réservé est modifié, il sera déclenché lorsque le texte de l'espace réservé n'est pas en anglais. Edge15+ résout ce problème, mais IE risque de ne jamais résoudre ce problème.

Solution :

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编码（不可以）

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!