我如何控制 IONIC 中的调用弹出选项

Question

这是我的情况，我的 Ionic 5 应用程序中有一个联系人列表，每个联系人可以包含一个或多个 phone 号码。其中一些可能是移动的并且也支持 SMS。所以现在当我在我的列表中创建 phone 数组时，我使用下面的代码允许用户发起呼叫

  <p *ngIf="phone.type === 'Mobile'">
    <ion-icon class="big center green" ios="car"></ion-icon> 
    <a (click)="dialNumber(phone.number)">({{phone.number | slice:0:3 }})
            {{phone.number | slice:3:6 }}-{{phone.number | slice:6:10 }}
    </a>
  </p>

dialNumber(nbr: string) {
    this.callNumber.callNumber(nbr, true)
  .then(res => console.log('Launched dialer!', res))
  .catch(err => console.log('Error launching dialer', err));
  }

以上代码在屏幕下方创建了一个弹出窗口，其中包含呼叫该号码和取消的选项。我实际上想做的是显示联系人的所有号码，以便用户可以单击所需的号码。我也希望能够在弹出窗口中包含将触发 SMS 与呼叫的项目。所以我的问题是我将如何去控制弹出窗口并添加额外的 nbrs 并可能允许 SMS。

这是目前的截图

Answer 1

您似乎正在使用 this Cordova plugin，因此您无法更改该弹出窗口中显示的选项。

您可以做的是在用户点击联系人时显示您自己的自定义操作sheet，然后根据点击的联系人设置可用选项已被选中。

https://ionicframework.com/docs/api/action-sheet

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

@Component({
  selector: 'action-sheet-example',
  templateUrl: 'action-sheet-example.html',
  styleUrls: ['./action-sheet-example.css'],
})
export class ActionSheetExample {

  constructor(public actionSheetController: ActionSheetController) {}

  async presentActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      cssClass: 'my-custom-class',
      buttons: [
        {
          text: 'Delete',
          role: 'destructive',
          icon: 'trash',
          handler: () => {
            console.log('Delete clicked');
          }
        }, 
        {
          text: 'Share',
          icon: 'share',
          handler: () => {
            console.log('Share clicked');
          }
        }, 
        {
          text: 'Play (open modal)',
          icon: 'caret-forward-circle',
          handler: () => {
            console.log('Play clicked');
          }
        }, 
        {
          text: 'Favorite',
          icon: 'heart',
          handler: () => {
            console.log('Favorite clicked');
          }
        }, 
        {
          text: 'Cancel',
          icon: 'close',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    
    await actionSheet.present();
  }

}

因此，在这种情况下，当用户点击联系人时，该用户会看到您的操作 sheet，其中包含发送短信和拨打电话的选项，如果用户选择拨打电话给您隐藏操作 sheet 然后调用 Cordova 插件。

我如何控制 IONIC 中的调用弹出选项

How can i control call popup options in IONIC

ionic-framework

ionic4