Web 組件與 angular.js & IE11 兼容性

Question

我有 angular.js 應用程序，我想在其中初始化 web 組件。

它在其他瀏覽器上運行良好，但似乎 IE11 存在問題

文檔.importNode

angular.js onInit function：

           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>

有沒有其他方法可以克隆 web 組件並在不使用 importNode 的情況下在內部傳遞參數，以便它可以在 IE11 上運行？

Answer 1

IE 11 不支持importNode和replaceWith 。 對於importNode ，我使用children來獲取<template>的子項以獲取 IE 11 中的 web 組件。對於replaceWith ，我使用此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>