Ionic-4 ion-alert-控制器创建功能不起作用

Question

我正在使用Ionic和vanila java脚本，我在head组件中使用CDN

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

在HTML正文中

<ion-alert-controller></ion-alert-controller>
......
.....
<script src="app.js"></script>

在app.js中

const alertCtrl = document.querySelector('ion-alert-controller');
..
..
..
alertCtrl.create ({
                message: 'ABC',
                header: 'DEF',
                button: ['Okay']
            });

出现以下错误：

app.js:29未捕获TypeError: alertCtrl.create不是HTMLElement中的函数。(app.js:29)

Answer 1

我不习惯用vanilla编写代码，但是根据Ionic docs for js，你应该这样使用alertController：

const alertCtrl = document.querySelector('ion-alert-controller');
alertCtrl.message ='ABC';
alertCtrl.header='DEF';
alertCtrl.button= ['OK'];

Answer 2

我也遇到过同样的情况。您正在使用的ionic CDN将下载最新版本的ionic，但我猜ion-alert-controller指令是ionic 4。

您需要使用

<link href="https://unpkg.com/@ionic/core@4.0.2/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/@ionic/core@4.0.2/dist/ionic.js"></script>

请注意，上面的链接指向unpkg.com，而不是jsdelivr.net

请参阅

https://unpkg.com/browse/@ionic/core@4.1.0-dev.201902272232.d66b12b/README.md

第26和27行