0

我已经使用 ngx-toastr 模块在我的 Angular 应用程序中显示 toastr 它在 Chorme、Firefox 中运行良好，但在 IE 中无法运行，即它在 ngOninit() 函数中运行，但在任何其他函数中都没有。从'ngx-toastr'导入{ToastrModule}；

4

2 回答 2

2

在我的例子中，toast 容器显示在 DOM 中，但 toast 本身没有显示。（您可以检查这是否是您的情况，检查 DOM 并查找容器 div 具有的文本“toast-container”）。

我尝试取消注释 polyfill 行和所有内容，直到我意识到 IE 出于某种原因将 toast 设置为属性“display:none”。

对我有用的只是将其添加到我的 styles.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;
  }
}

希望这可以帮助！

于 2020-01-28T12:50:00.430 回答
-1

polyfills.ts

/**

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

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

    *

  • 该文件分为 2 个部分：

    1. 浏览器 polyfill。这些在加载 ZoneJS 之前应用，并按浏览器排序。
    1. 应用程序导入。在 ZoneJS 之后导入的文件应该在你的 main 之前加载

  • 文件。

    *

  • 当前设置用于所谓的“常青”浏览器；最新版本的浏览器

  • 自动更新自己。这包括 Safari >= 10、Chrome >= 55（包括 Opera）、

  • 桌面版 Edge >= 13，移动版 iOS 10 和 Chrome。

    *

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

    */

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

  • 浏览器填充

    */

/** IE9、IE10 和 IE11 需要以下所有 polyfill。**/

导入'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 支持 */

导入'classlist.js'；// 运行npm install --save classlist.js.

/** IE10 和 IE11 需要以下反射 API。*/

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

/** Evergreen 浏览器需要这些。**/

// 用于 JIT 中的反射元数据。如果你使用 AOT（并且只有 Angular 装饰器），你可以删除。

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

/**

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

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

  • Angular 中的标准动画支持不需要任何 polyfill（从 Angular 6.0 开始）。

    **/

导入“网络动画-js”；// 运行npm install --save web-animations-js.

/**

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

  • 用户可以通过设置以下标志来禁用部分宏任务/DomEvents 补丁

    */

（任何窗口）.__Zone_disable_requestAnimationFrame = true; // 禁用补丁 requestAnimationFrame

（任何窗口）.__Zone_disable_on_property = true; // 禁用补丁 onProperty 例如 onclick

（任何窗口）.__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // 禁用补丁指定的事件名称

/*

  • 在 IE/Edge 开发者工具中，addEventListener 也会被 zone.js 包裹

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

    */

（任何窗口）.__Zone_enable_cross_context_check = true;

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

  • Angular 本身默认需要 Zone JS。

    */

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

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

  • 应用程序导入

    */

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

(window as any)['global'] = window;

if (!Element.prototype.matches) {

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

  Element.prototype.webkitMatchesSelector;

}

package.json { "name": "xtreme-admin-angular", "version": "0.0.0", "scripts": { "ng": "ng", "start": "node app.js", “build”：“ng build”，“test”：“ng test”，“lint”：“ng lint”，“e2e”：“ng e2e”，“postinstall”：“node patch-webpack.js”}， “私人”：真，“依赖”：{“@agm/core”：“^1.0.0-beta.7”，“@angular/animations”：“^7.0.1”，“@angular/common”： “^7.0.1”、“@angular/compiler”：“^7.0.1”、“@angular/core”：“^7.0.1”、“@angular/forms”：“^7.0.1”、“@angular/http": "^7.0.1", "@angular/platform-b​​rowser": "^7.0.1", "@angular/platform-b​​rowser-dynamic": "^7.0.1", "@angular /路由器”：“^7.0.1”，“@jaspero/ng-confirmations”：“^0.4.7”，“@jaspero/ng2-confirmations”：“^0.3.3”，“@ng-bootstrap/ng -bootstrap”：“^3.3.1”、“@swimlane/ngx-charts”：“^7.0.1”、“@swimlane/ngx-datatable”：“^13.1.0”、“@types/crypto-js ": "^3.1.43", "angular-calendar": "^0.25.2", "angular-datatables": "^6.0.0", "angular2-notifications": "^2.0.0", "bcryptjs ": "^2.4.3", "引导程序": "^4.1.3",“c3”：“^0.4.23”，“chart.js”：“^2.8.0”，“chartist”：“^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-autotable”：“^3.2.4”，“业力” -html-reporter": "^0.2.7", "karma-phantomjs-launcher”：“^1.0.4”，“karma-teamcity-reporter”：“^1.1.0”，“ng-chartist”：“^1.1.1”，“ng2-charts”：“^ 1.6.0”、“ng2-dragula”：“^1.5.0”、“ng2-file-upload”：“^1.3.0”、“ng2-smart-table”：“1.2.2”、“ngx-加载”：“^3.0.1”，“ngx-owl-carousel”：“^2.0.7”，“ngx-owl-carousel-o”：“^2.0.1”，“ngx-分页”：“^ 4.1.0”、“ngx-perfect-scrollbar”：“6.1.0”、“ngx-quill”：“^3.6.0”、“ngx-slick-carousel”：“^0.4.6”、“ngx-微调器": "^7.2.0", "ngx-toastr": "^8.7.3", "ngx-tooltip"：“0.0.9”、“node-sass”：“^4.12.0”、“owl.carousel”：“^2.3.4”、“pace-js”：“^1.0.2”、“quill”： “^1.3.6”、“删除节点模块”：“^1.7.6”、“rxjs”：“^6.5.2”、“rxjs-compat”：“^6.5.2”、“脚本加载器” ": "^0.7.2", "slick-carousel": "^1.8.1", "web-animations-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.0.3", "@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-aspect-ratio”：“^1.0.5”，“jasmine-core”：“~2.99 .1”、“jasmine-spec-reporter”：“~4.2.1”、“karma”：“~1.7.1”、“karma-chrome-launcher”：“~2.2.0”、“karma-coverage-伊斯坦布尔记者”：“~1.4.2”，“业力茉莉花”：“~1.1.1”，“karma-jasmine-html-reporter”：“^0.2.2”，“量角器”：“^5.4.2”，“ts-node”：“~5.0.1”，“tslint”：“~5.9.1 ", "typescript": "3.1.6" }, "browser": { "crypto": false, "stream": false } }

于 2020-01-09T09:08:30.547 回答