Toast服务不适用于Internet Explorer

Question

我在我的angular应用程序中使用了ngx toast模块来显示toast。它在Chorme、Firefox中运行良好，但在IE中不起作用，即它在ngOninit()函数中起作用，但在任何其他函数中都不起作用。从"ngx toast"导入｛Toast模块｝；

Answer 1

在我的例子中，toast容器显示在DOM中，但toast本身没有显示。(您可以检查检查DOM并查找容器div所具有的文本"toast container"是否属于这种情况)。

我试着取消对polyfills行和所有内容的注释，直到我意识到由于某种原因，IE将toast设置为属性"display:none"。

对我有用的是把它添加到我的样式中。scss:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
.toast {
display: block !important;
}
}
@supports (-ms-accelerator:true) {

/* IE Edge 12+ CSS styles go here */ 
.toast {
display: block !important;
}
}

希望这能有所帮助！

Answer 2

polyfills.ts

/**

• 此文件包括Angular所需的polyfill，并在应用程序之前加载。

• 您可以将自己的额外polyfill添加到此文件中。

  *

• 该文件分为两个部分：

• 1. 浏览器多填充。这些都是在加载ZoneJS之前应用的，并按浏览器排序
• 2. 应用程序导入。在ZoneJS之后导入的文件，应该在您的main之前加载

• 文件。

  *

• 目前的设置是针对所谓的"常青树"浏览器；的浏览器的最后版本

• 自动更新自身。这包括Safari>=10、Chrome>=55(包括Opera)、

• 桌面上的Edge>=13，手机上的iOS 10和Chrome。

  *

• 在中了解更多信息https://angular.io/docs/ts/latest/guide/browser-support.html

  */

/***************************************************************

• BROWSER POLYFILLS

  */

/**IE9、IE10和IE11需要以下所有聚乙烯填充物。**/

导入'core-js/es6/symbol'；

导入'core-js/es6/object'；

导入'core-js/es6/function'；

导入'core-js/es6/parse-int'；

导入'core js/es6/parse float'；

导入'core-js/es6/number'；

导入'core-js/es6/math'；

导入'core-js/es6/string'；

导入'core-js/es6/date'；

导入'core-js/es6/array'；

导入'core-js/es6/regexp'；

导入'core-js/es6/map'；

导入'core-js/es6/weak-map'；

导入'core-js/es6/set'；

/**IE10和IE11需要以下内容来支持SVG元素*/上的NgClass

import"classlist.js"；//运行npm install --save classlist.js。

/**IE10和IE11对于Reflect API要求以下内容。*/

导入'core-js/es6/reflect'；

/**常青浏览器需要这些。**/

//用于在JIT中反映元数据。如果使用AOT(并且仅使用Angular装饰器)，则可以移除。

导入'core-js/es7/reflect'；

/**

• 网络动画@angular/platform-browser/animations

• 只有在应用程序中使用AnimationBuilder并使用IE/Edge或Safari时才需要。

• Angular中的标准动画支持不需要任何多边形填充(从Angular 6.0开始)。

  **/

导入"web动画js"；//运行npm install --save web-animations-js。

/**

• 默认情况下，zone.js将修补所有可能的macroTask和DomEvents

• 用户可以通过设置以下标志来禁用macroTask/DomEvents补丁的某些部分

  */

(任意窗口)__Zone_disable_requestAnimationFrame=true；//禁用补丁请求动画帧

(任意窗口)__Zone_disable_on_property=true；//禁用补丁onProperty，如onclick

(任意窗口)__zone_symbol__BLACK_LISTED_EVENTS=[滚动，鼠标移动]；//禁用修补程序指定的事件名称

/*

• 在IE/Edge开发工具中，addEventListener也将由zone.js 封装

• 使用以下标志，它将绕过用于IE/Edge 的zone.js补丁

  */

(任意窗口)__Zone_enable_cross_text_check=true；

/***************************************************************************************************

• 默认情况下，Angular本身需要Zone JS。

  */

导入'zone.js/dist/zone'；//包含在Angular CLI中。

/***************************************************************************************************

• 应用程序导入

  */

//将全局添加到窗口，分配窗口本身的值。

(任意窗口)['global']=窗口；

if(！Element.protype.matches)｛

Element.prototype.matches = (<any>Element.prototype).msMatchesSelector ||
Element.prototype.webkitMatchesSelector;

}

package.json{"name"："xtreme admin angular"，"版本"："0.0.0"，"脚本"：{"ng"："ng"，"start"："node-app.js"，"build"："ng build"，"test"："ng test"，"lint"："ng lint"，"e2e"："ng e2e"，"postinstall"："node-patch-webpack.js"}，"private"：true，"依赖项"：{"@agm/core"："^1.0.0-beta.7"，"@angular/animations"："^7.0.1"，"@角度/公共"："^7.0.1"，"@angular/compiler"："^7.0.1"，"@棱角分明/核心"："^7.0.1"，"@angular/forms"："^7.0.1"，"@angular/http"："^7.0.1"，"@angular/platform browser"："^7.0.1"，"@angular/platform browser dynamic"："^7.0.1"，"@angular/router"："^7.0.1"，"@jaspero/ng确认"："^0.4.7"，"@jaspero/ng2确认"："^0.3.3"，"@ng bootstrap/ng bootstrap"："^3.3.1"，"@swimlane/ngx-charts"："^7.0.1"，"@swimlane/ngx数据表"："^13.1.0"，"@types/crypto-js"："^3.1.43"，"角日历"："^0.25.2"，"角度数据表"："^6.0.0"，"angular2通知"："^2.0.0"，"bcryptjs"："^2.4.3"，"引导程序"："^4.1.3"，"c3"："^0.4.23"，"chart.js"："^2.8.0"，"图表学家"："^0.11.3"，"classlist.js"："^1.1.20150312"，"压缩"："^1.7.4"，"core-js"："^2.6.9"，"关键"："^1.3.6"，"crypto-js"："^3.1.9-1"，"d3"："^4.8.0"，"datatables.net"："^1.10.16"，"datatables.net dt"："^1.10.16"，"express"："^4.17.1"，"express simple cdn"："^1.0.1"，"jquery"："^3.4.1."，"jspdf"："^1.5.3"，"jspdf自动表格"："^3.2.4"，"karma html报告者"："^0.2.7"，"karma phantomjs启动器"："^1.0.4"，"因果报应团队城市记者"："^1.1.0"，"ng图表绘制者"："^1.1.1"，"ng2图表"："^1.6.0"，"ng2 dragula"："^1.5.0"，"ng2文件上载"："^1.3.0"，"ng2智能表"："1.2.2"，"ngx加载"："^3.0.1"，"ngx猫头鹰旋转木马"："^2.0.7"，"ngx-owl-carouse-o"："^2.0.1"，"ngx分页"："^4.1.0"，"ngx完美滚动条"："6.1.0"，"ngx套筒"："^3.6.0"，"ngx光滑转盘"："^0.4.6"，"ngx微调器"："^7.2.0"，"ngx烤面包机"："^8.7.3"，"ngx工具提示"："0.0.9"，"node sass"："^4.12.0"，"owl.carousel"："^2.3.4"，"pace js"："^1.0.2"，"套筒"："^1.3.6"，"删除节点模块"："^1.7.6"，"rxjs"："^6.5.2"，"rxjs-compat"："^6.5.2"，"脚本加载程序"："^0.7.2"，"光滑转盘"："^1.8.1"，"网页动画js"："^2.3.2"，"zone.js"："^0.8.29"}，"devDependencies"：{"@angular builders/custom webpack"："^8.2.0"，"@angular devkit/build angular"："^0.10.7"，"@angular/cli"："~7.03"，"@angular/compiler cli"："^7.0.1"，"@angular/language service"："^7.0.1"，"@types/c3"："^0.6.4"，"@types/chartist"："^0.9.46"，"@types/datatables.net"："^1.10.17"，"@types/jasmine"："~2.8.6"，"@types/jasminewd2"："~2.0.3"，"@types/jquery"："^3.3.22"，"@types/node"："~8.9.4"，"codelyzer"："~4.2.1"，"css纵横比"："^1.0.5"，"茉莉花心"："~2.99.1"，"茉莉花规格报告者"："~4.2.1"，"因果报应"："~1.7.1"，"因果报应铬发射器"："~2.2.0"，"因果报应报道伊斯坦布尔记者"："~1.4.2"，"因果报应茉莉花"："~1.1.1.1"，"karma jasmine html记者"："^0.2.2"，"量角器"："^5.4.2"，"ts节点"："~5.0.1"，"tslint"："~5.9.1"，"typescript"："3.1.6"}，"浏览器"：{"crypto"：false，"流"：false}}