具有 angular.js 和 IE11 兼容性的 Web 组件

Question

我有 angular.js 个应用程序，我想在其中初始化一个 Web 组件。

它在其他浏览器上工作得很好，但 IE11 似乎有问题

document.importNode

angular.js onInit 函数：

           vm.$onInit = function() {
                vm.params = $location.search();

                if(vm.params.merchantId  && vm.params.apiToken && vm.params.amount && vm.params.orderId) {
                    vm.mid = vm.params.merchantId;
                    vm.apiToken = vm.params.apiToken;
                    vm.amount = vm.params.amount;
                    vm.orderId = vm.params.orderId;

                    let template = document.querySelector('#template');
                    let clone = document.importNode(template.content, true);
                    let cmp = clone.querySelector('cmp-request');
                    
                    cmp.setAttribute('mid', vm.mid);

                    template.replaceWith(clone);
                    
                }
            }

HTML:

<template id="template"> 
    <cmp-request></cmp-request>
</template>

是否有任何其他方法可以在不使用 importNode 的情况下克隆 Web 组件并在内部传递参数，以便它可以在 IE11 上运行？

Answer 1

IE 11 不支持 importNode 和 replaceWith。对于 importNode，我使用 children 获取 <template> 的 children 获取 IE 11 中的 Web 组件。对于 replaceWith，我使用 this polyfill 在 IE 11 中支持它。

您可以参考我的带有虚拟值的代码示例：

function ReplaceWithPolyfill() {
  'use-strict'; // For safari, and IE > 10
  var parent = this.parentNode,
    i = arguments.length,
    currentNode;
  if (!parent) return;
  if (!i) // if there are no arguments
    parent.removeChild(this);
  while (i--) { // i-- decrements i and returns the value of i before the decrement
    currentNode = arguments[i];
    if (typeof currentNode !== 'object') {
      currentNode = this.ownerDocument.createTextNode(currentNode);
    } else if (currentNode.parentNode) {
      currentNode.parentNode.removeChild(currentNode);
    }
    // the value of "i" below is after the decrement
    if (!i) // if currentNode is the first argument (currentNode === arguments[0])
      parent.replaceChild(currentNode, this);
    else // if currentNode isn't the first
      parent.insertBefore(currentNode, this.nextSibling);
  }
}
if (!Element.prototype.replaceWith)
  Element.prototype.replaceWith = ReplaceWithPolyfill;
if (!CharacterData.prototype.replaceWith)
  CharacterData.prototype.replaceWith = ReplaceWithPolyfill;
if (!DocumentType.prototype.replaceWith)
  DocumentType.prototype.replaceWith = ReplaceWithPolyfill;


var template = document.querySelector('#template');
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > -1) { //IE11
  var clone = template.children[0];
  clone.setAttribute('mid', 'test');
} else {
  var clone = document.importNode(template.content, true);
  var cmp = clone.querySelector('cmp-request');
  cmp.setAttribute('mid', 'test');
}
template.replaceWith(clone);

<template id="template">
   <cmp-request></cmp-request>
</template>

具有 angular.js 和 IE11 兼容性的 Web 组件

Web Components with angular.js & IE11 compatibility

javascript

internet-explorer

clone

web-component

angularjs