Ionic 8+Angular 18独立组件：Android端Alert自定义HTML显示异常求助

问题描述 #

使用Ionic 8搭配Angular 18开发独立组件项目，尝试创建带自定义HTML的Alert，Web端正常渲染，但打包为Android应用时HTML被当作纯文本显示。相关代码如下：

TypeScript 代码 #

async presentAlert() {
  const alert = await this.alertController.create({
    cssClass: 'delete-project-confirmation',
    message: `
      <ion-icon name="trash-sharp" class="delete-icon"></ion-icon>
      <p>Are you sure?</p>
      <p>This action will delete your project.
      You won’t be able to revert this!</p>
    `,
    buttons: [
      {
        cssClass: 'delete-btn',
        text: 'Yes, delete it',
      },
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'cancel-btn',
      },
    ],
  });

  await alert.present();
}

SCSS 代码 #

.delete-project-confirmation {
  .alert-wrapper {
    text-align: center;
    border-radius: 10px;
  }

  .alert-message {
    font-size: 16px;
    font-weight: 500;
  }

  .delete-icon {
    font-size: 48px;
    color: var(--ion-color-danger);
  }

  .alert-button.cancel-btn {
    color: var(--ion-color-primary);
  }

  .alert-button.delete-btn {
    color: var(--ion-color-danger);
  }
}

已配置的main.ts #

import { IonicModule } from '@ionic/angular';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
    provideRouter(routes, withPreloading(PreloadAllModules)),
    importProvidersFrom(
      IonicModule.forRoot(
        { innerHTMLTemplatesEnabled: true } // Added
      )
    )
  ],
});

解决方案 #

1. 配置Capacitor原生安全权限 #

Android平台的WebView默认会限制HTML内容渲染以保障安全，仅开启innerHTMLTemplatesEnabled不足以覆盖原生端规则。在capacitor.config.ts中添加以下配置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app.id',
  appName: 'Your App Name',
  webDir: 'dist',
  server: {
    androidScheme: 'https'
  },
  // 新增配置
  allowNavigation: ["*"],
  allowFileAccess: true,
  android: {
    allowMixedContent: true,
    webView: {
      allowContentAccess: true,
      allowFileAccess: true,
      domStorageEnabled: true,
      allowUniversalAccessFromFileURLs: true
    }
  }
};

export default config;

2. 移除HTML转义字符 #

原代码中使用的<、"等转义字符，Web端可自动解析，但原生WebView可能无法正确处理，直接使用原生HTML标签：

message: `
  <ion-icon name="trash-sharp" class="delete-icon"></ion-icon>
  <p>Are you sure?</p>
  <p>This action will delete your project. You won’t be able to revert this!</p>
`,

3. 迁移样式至全局文件 #

原生WebView对组件局部样式的隔离更严格，将Alert相关样式移至global.scss而非组件局部SCSS文件：

// global.scss
.delete-project-confirmation .alert-wrapper {
  text-align: center;
  border-radius: 10px;
}

.delete-project-confirmation .alert-message {
  font-size: 16px;
  font-weight: 500;
}

.delete-project-confirmation .delete-icon {
  font-size: 48px;
  color: var(--ion-color-danger);
}

.delete-project-confirmation .alert-button.cancel-btn {
  color: var(--ion-color-primary);
}

.delete-project-confirmation .alert-button.delete-btn {
  color: var(--ion-color-danger);
}

4. 验证Android WebView设置 #

若上述步骤无效，修改Android项目的MainActivity.java，确保WebView配置允许HTML渲染：

// MainActivity.java
import android.webkit.WebSettings;
import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
  @Override
  public void onResume() {
    super.onResume();
    if (getBridge() != null && getBridge().getWebView() != null) {
      WebSettings settings = getBridge().getWebView().getSettings();
      settings.setDomStorageEnabled(true);
      settings.setAllowContentAccess(true);
      settings.setAllowFileAccess(true);
      settings.setAllowUniversalAccessFromFileURLs(true);
    }
  }
}

验证步骤 #

1. 清理项目缓存：执行npm run clean、ionic capacitor clean android
2. 重新构建同步：npm run build && ionic capacitor sync android
3. 在Android设备/模拟器运行测试：ionic capacitor run android

内容的提问来源于stack exchange，提问作者Ravi Gaud