Ionic中使用Cordova navigator.notification.alert报错，求助解决方案

Hey there! Let's sort out that Cordova alert problem you're facing. I see you're getting errors with navigator.notification and ran into a syntax issue with (window).navigator.plugin—let's walk through the solution step by step.

First: Install the Required Plugins #

The navigator.notification API comes from Cordova's Dialogs plugin, which isn't included by default in Ionic. You'll need to install two things: the Cordova plugin itself, and the Ionic Native wrapper (which makes it Angular-friendly).

Run these commands in your project root:

# Install the Cordova Dialogs plugin
ionic cordova plugin add cordova-plugin-dialogs

# Install the Ionic Native wrapper for Dialogs
npm install @ionic-native/dialogs

Second: Configure the Plugin in Your App Module #

Next, you need to register the Dialogs service in your app.module.ts so it's available across your app:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// Import the Dialogs service
import { Dialogs } from '@ionic-native/dialogs/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    Dialogs, // Add Dialogs to the providers array
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Third: Use the Dialogs Service in app.component.ts #

Instead of directly using navigator.notification, use the Ionic Native Dialogs service—it's cleaner, has TypeScript support, and avoids the type errors you were seeing. Here's how to implement it:

import { Component } from '@angular/core';
import { Dialogs } from '@ionic-native/dialogs/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private dialogs: Dialogs) {
    // Call your alert when the component initializes (or wherever you need it)
    this.showCustomAlert();
  }

  showCustomAlert() {
    // Replace with your actual data.message and data.title
    const alertMessage = "Your alert message here";
    const alertTitle = "Alert Title";

    this.dialogs.alert(alertMessage, alertTitle, "Ok")
      .then(() => {
        console.log('Alert closed successfully');
        // Trigger your handler after the alert is dismissed
        this.alertHandler();
      })
      .catch(error => console.error('Error showing alert:', error));
  }

  alertHandler() {
    // Your custom logic when the alert button is clicked
    console.log('Alert button was pressed!');
  }
}

Why Your Original Code Failed #

Let's break down the issues with your initial attempts:

1. Missing Plugin: If you didn't install cordova-plugin-dialogs, navigator.notification doesn't exist—hence the error.
2. TypeScript Type Issue: Even with the plugin installed, TypeScript doesn't recognize navigator.notification by default, so you'd need to bypass type checks (not ideal).
3. Syntax Error: Your (window).navigator.plugin had two issues: it should be notification (not plugin), and you need to cast window to any to avoid TypeScript errors. Also, you must call Cordova APIs after the platform is ready.

If You Insist on Using the Raw Cordova API #

If you prefer to use navigator.notification directly (not recommended over Ionic Native), here's how to fix it:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  constructor(private platform: Platform) {
    // Wait for the platform to be ready before accessing Cordova APIs
    this.platform.ready().then(() => {
      const data = { message: "Test message", title: "Test Title" };
      // Cast window to any to bypass TypeScript checks
      (window as any).navigator.notification.alert(
        data.message,
        this.alertHandler.bind(this), // Bind this to keep component context
        data.title,
        "Ok"
      );
    });
  }

  alertHandler() {
    console.log('Alert handler triggered!');
  }
}

⚠️ Note: Always wrap Cordova API calls in platform.ready()—Cordova plugins aren't available until the platform fully loads.

内容的提问来源于stack exchange，提问作者MichaelPage DCX