垫对话框关闭按钮在iOS设备上不起作用

Question

我使用 Angular 13 用于我的应用。我使用了 Angular-Material Mat-Dialog Box 作为弹出模式。这是提交和关闭按钮的 html 代码。

<mat-dialog-actions>
<button class="btn" mat-raised-button color="accent" (click)="closeModal()">
  <span class="btn-text">CLOSE</span>
</button>
<button class="btn" mat-raised-button style="background-color: #CF466F;" (click)="deleteAd(data.id)">
  <span *ngIf="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span *ngIf="!loading" class="btn-text">YES, DELETE</span>
</button>

一切都在桌面＆amp;中正常工作。 Android 移动设备。但是它在 iOS 设备中无法正常工作。此处提交按钮在我的I Phone（ iOS版本12.5.5 ）中正常运行。但是关闭按钮不起作用。当弹出模态时，由于关闭按钮无法正常运行，因此无法关闭它。

这是我的 打字稿 代码。

closeModal(): void {
this.ngZone.run(() => {
  this.dialogRef.close();
});

}

有人可以帮我吗？

Answer 1

我在关闭MAT-DIALOG问题的应用程序中也遇到了同样的问题，该应用程序在Angular14中后来升级为Angular15，我通过为最新的JavaScript功能添加polyfills来解决此问题，

以便我安装了一些依赖关系，

1) npm i core-js
2)npm install --save web-animations-js

我将这些polyfills添加到了我的多填充物中。 我的pollyfills.ts之后的ts文件

看起来

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

import 'core-js';

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
import 'zone.js/dist/zone'; // Included with Angular CLI.

您可以通过仅通过引用文档 https://github.com/zloirock/core-js#readme

下面的文章帮助我在此解决方案 https://dev.to/coly010/angular-how-to-support-ie11-4924

Answer 2

我在Angular版本13.2.0中也遇到了同样的问题。我还有另一个具有13.0.2版本的项目，它可以使用。对于我来说，它也无法与14版或更高的13.x一起使用。

因此，快速修复将降级。

Answer 3

我也有同样的问题！您必须禁用iOS＆lt; = 13的动画！

我在这里找到了解决方案：
https://github.com/angular/angular/angular/angular/angular/issues/45016

app.module .ts

const disableAnimations = !('animate' in document.documentElement) || (navigator && /iPhone OS (8|9|10|11|12|13)_/.test(navigator.userAgent));


@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule.withConfig({ disableAnimations }),
...