标签: ionic4

关于如何使用 ionic 4 创建 PWA 有足够的教程，但我发现的所有解决方案都集中在根目录中部署应用程序。
我需要的是将整个应用程序部署在子文件夹中：
https://my-domain.com/my-app/

我详细解释了此存储库中的问题：
https ://github.com/Viterbo/ionic-4-PWA

谢谢

我在屏幕底部的按钮上有一个 Ionic 4 Popover。当我单击按钮打开弹出窗口时，它出现在屏幕下方......

.html

<div class="TabBarItem" (click)="popover($event)">
  <label>Tab Item</label>
</div>

.ts

   function popover(ev) {

    this.popoverController
                .create({
                  component: PopoverComponent,
                  event: ev,
                  translucent: true,
                })
                .then(el => {
                  el.present();
                });
    }

结果...

有没有办法解决这个问题，或者手动重新定位？

一直在尝试更改页脚背景，但我无法做到正确。我为每个标签都有一个颜色，但只有最后一个标签被更改（蓝色 - #0000ff）。如何在 Ionic 4 中进行样式设计？

<template>
  <ion-footer>
    <ion-toolbar>
      <ion-title v-if="loggedIn">
        <a href="https://www.facebook.com/" target="_blank">
          <ion-icon name="logo-facebook"></ion-icon>
        </a>
        <a href="https://www.instagram.com/" target="_blank">
          <ion-icon name="logo-instagram"></ion-icon>
        </a>
      </ion-title>
    </ion-toolbar>
  </ion-footer>
</template>

<script>
export default {
  name: "pageFooter",
  computed: {
    loggedIn() {
      return this.$store.getters.loggedIn;
    }
  }
};
</script>

<style lang="scss">
ion-footer {
  background-color: #ff0000;
  ion-toolbar {
    background-color: #00FF00;
    ion-title {
      background-color: #0000ff;
      a {
        font-size: 25px;
        color: #000;
      }
    }
  }
}
</style>

它与“shadow dom”概念有关，我还没有完全理解。此 DOM 结构用于页脚。

当我尝试在 Angular 应用程序中上传 Base64 图像时，http.post 方法会抛出错误：

Failed to execute \'setRequestHeader\' on \'XMLHttpRequest\': Value is not a valid ByteString.\n

代码如下所示：

let headers = new Headers();\n      headers.append("Accept", \'application/json\');\n      headers.append("Content-Type", "application/json");\n      headers.append(\'User-Agent\', \'Mozilla/5.0 (Windows NT 10.0; \xe2\x80\xa6) Gecko/20100101 Firefox/68.0\' );\n\n      let postData = {\n        "AudometerCapture":this.abc,                          \n        "Door1":this.abc,\n        "Door2":this.abc,\n       "Door3":this.abc,\n        "Door4":this.abc,\n       "TransactionID": 90\n    }\n\n      this.http.post(\'http://apiearningwheels.sharpnettechnology.com/api/DailyImageUpload/UploadDailyImages\', JSON.stringify(postData), {headers: headers})\n        .map(res => res.json())\n        .subscribe(data => {\n          console.log(data);\n          this.showLongToast("result is :- " + res);\n        });\n

我期望输出是，\'result is = \'但我收到错误。

该请求使用 …

在alertController中，如果输入字段为空，我想调用prompt.setMessage()。但这在ionic4中不是有效的函数

代码

 const prompt= await this.alertController.create({
      header: 'insert text',
      message: 'enter text',
      inputs: [
        {
          name: 'itemtext',
          placeholder: 'enter text'
        }
      ],
      buttons: [{
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Ok',
          handler: async (data:any) => {
            if(data.itemtext==""){
              prompt.setMessage("text should not be empty");
              return false;
            }
            else{
            console.log("data.itemtext");
            }
          }
        }
      ]
    });
    await prompt.present();

如果文本为空，我不想关闭警报提示，请帮忙。

我正在尝试使用 Ionic 离子烤面包。我在他们的网站上找到了这个示例：https ://ionicframework.com/docs/api/toast

现在我的问题是：上面添加的任何按钮的“处理程序”回调都不会被调用，并且不会出现日志。我在 Android 设备和 MacOS 浏览器 Safari 上尝试了此代码，两者都显示相同的问题。

我尝试使用 toast.onDidDismiss().then(()=>{ console.log('Closed'); }) 但这没有帮助，因为我计划添加多个按钮并且我想区分哪个按钮被点击。

• 我知道我可以构建自己的组件来执行此操作，但我想知道我的代码中是否缺少某些内容，或者这是 ion-toast 的一个众所周知的问题。

代码：

  async presentToastWithOptions() {    
    const toast = await this.toastController.create({
      header: 'Toast header',
      message: 'Click to Close',
      position: 'top',
      buttons: [
        {
          side: 'start',
          icon: 'star',
          text: 'Favorite',
          handler: () => {
            console.log('this log should appear when this icon is clicked.');
          }
        }, {
          text: 'Done',
          role: 'cancel',
          handler: () => {
            console.log('This log should appear when I click done.');
          } …

我想同时使用这两种样式<ion-tabs></ion-tabs>，<ion-menu></<ion-menu>出于某种原因，当我同时激活它们时，侧边菜单消失了，我试图将选项卡变成一个组件，但得到了相同的结果，不知道该怎么做？我不希望选项卡显示在特定页面中，我希望它们显示在整个应用程序中

<ion-split-pane>
    <ion-menu contentId="content">
        <ion-header>
            <ion-toolbar>
                <ion-title>Menú</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
                    <ion-item [routerLink]="p.url" routerDirection="forward"
                              [class.active-item]="selectedPath === p.url">
                        <ion-icon name="{{p.icon}}" slot="start"></ion-icon>
                        {{p.title}}
                    </ion-item>

                </ion-menu-toggle>
                <ion-item tappable="" (click)="logoutAction()">
                    <ion-icon name="log-out" slot="start"></ion-icon>
                    Salir
                </ion-item>
            </ion-list>

        </ion-content>
    </ion-menu>
    <ion-router-outlet id="content" main></ion-router-outlet>

</ion-split-pane>

<ion-tabs>
<ion-tab-bar slot="bottom" color="dark">
    <ion-tab-button tab="feed">
        <ion-icon name="paper"></ion-icon>
        <ion-label>Feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="messages">
        <ion-icon name="send"></ion-icon>
        <ion-label>Messages</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="notifications">
        <ion-icon name="notifications"></ion-icon>
        <ion-label>Contact</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
        <ion-icon name="cog"></ion-icon>
        <ion-label>Settings</ion-label>
    </ion-tab-button>

</ion-tab-bar>

我正在创建一个带有弹出界面的离子选择元素。我想设置 ion-select-options 的样式，以便它们跨越屏幕的宽度，但我尝试过的任何东西都不起作用。

<ion-header>
  <ion-toolbar>
        <ion-buttons slot="secondary">
                <ion-button>Cancel</ion-button>
              </ion-buttons>
              <ion-title>Messages</ion-title>
              <ion-buttons slot="primary">
                    <ion-button>Blah</ion-button>
                  </ion-buttons>
  </ion-toolbar>
  <ion-toolbar>
        <ion-select interface="popover" placeholder="Select an item">
                <ion-select-option value="nes">Lorem Ipsum is simply dummy text of the</ion-select-option>          
                <ion-select-option value="n64">Nintendo64</ion-select-option>
                <ion-select-option value="ps">Blah Blah Ipsum is simply dummy text of the</ion-select-option>
                <ion-select-option value="genesis">Sega Genesis</ion-select-option>
        </ion-select>
  </ion-toolbar>
</ion-header>

我希望选择选项跨越屏幕的宽度。...如果列表中的任何文本比选择选项长，我可以接受。

在我的 Ionic 项目中，我使用 Capacitor 在移动平台中进行部署。

为了从设备捕获图像，我使用了 Capacitor Camera，它可以帮助我以三种格式获取图像。1.Base64。2. 数据网址。3.文件Uri。

onCaptureImage() {
    if (!Capacitor.isPluginAvailable('Camera')) {
      this._sharedService.showToastMessage(
        'Unable To Open Camera', 1000);
      return;
    }
    Plugins.Camera.getPhoto({
      quality: 60,
      source: CameraSource.Prompt,
      correctOrientation: true,
      resultType: CameraResultType.DataUrl
    })
      .then(image => {
        const blobImg = this._sharedService.dataURItoBlob(image.dataUrl);
        this.myfiles.push(blobImg);
        this.urls.push(this.sanitizer.bypassSecurityTrustUrl(image.dataUrl));
      })
      .catch(error => {
        return false;
      });
  }

从这个DataUrl我用来显示图像和上传这个图像，我将它转换成Blob然后通过FormData.

现在质量为 60，我希望质量为 100。但是当我们生成DataUrl100 个质量图像时它会挂起设备。

我只想知道有什么方法可以生成FileUri质量为 100 的图像，并且还可以预览图像而不生成Base64或不生成图像DataUrl。

谢谢。

我正在用 Angular (Ionic) 制作录音机

控制器代码如下：

<img
      src="assets/imgs/voice-message-btn.svg"
      alt="Voice message"
      *ngIf="textMessage.length==0"
      (mousedown)="onStartRecording($event)"
/>

但是 mousedown 事件（控制台日志）仅在释放鼠标按钮时触发。

如果我执行以下操作

<img
      src="assets/imgs/voice-message-btn.svg"
      alt="Voice message"
      *ngIf="textMessage.length==0"
      (mousedown)="onStartRecording($event)"
      (mouseup)="onStopRecording($event)"
/>

然后 mousedown 事件和 mouseup 事件在鼠标释放时一起触发。

谁能告诉为什么鼠标事件没有正确触发？（mousedown 在按钮按下时触发，mouseup 在按钮释放时触发）

我在其他页面尝试过这个事件，似乎这个问题是全球性的。我可以确认我的鼠标工作正常，因为我用 vanilla javascript 尝试了这些事件