Question

我正在尝试重用函数以在Ionic 4中打开模式。这两种方法虽然是分开工作的，但希望根据其独立的参数进行组合以更改出现的模式标题。

这不会编译，但是显示了我本质上想要实现的目标：

async openModal(edit, add) {
    const modal = await this.modalController.create({
        component: ModalComponent,
        componentProps: {
            if (edit) {
                'title': 'Edit Firehouse'
            else if (add) {
                'title': 'Add Firehouse'
            },
            'firehouseShow': true
        }
    });
    return await modal.present();
}

这是当前可用的内容，即使出现错误也可以编译：

“重复功能实现”。

async openModal(edit) {
    const modal = await this.modalController.create({
        component: ModalComponent,
        componentProps: {
            'title': 'Edit Firehouse',
            'firehouseShow': true
        }
    });
    return await modal.present();
}

async openModal(add) {
    const modal = await this.modalController.create({
        component: ModalComponent,
        componentProps: {
            'title': 'AddFirehouse',
            'firehouseShow': true
        }
    });
    return await modal.present();
}

这些函数通过Angular按钮单击事件来调用：

<ion-button (click)="openModal(edit)">Edit</ion-button>
<ion-button (click)="openModal(add)">Add</ion-button>

我希望重用此函数，尤其是因为它仅一次（一次）在单个页面上被调用。但是，它会动态更改模式中显示的内容以及每次点击事件填充或不填充的数据。例如，“添加”点击事件将不会检索任何数据，但“编辑”会检索任何数据。

Answer 1

即使解决了重复功能的问题，第二个也无法正常工作，因为两个功能都做同样的事情。

强制使用RelativeLayout作为参数。

LinearLayout

当调用函数时：

linearLayout2

更新

如果只想获取标题作为参数，请在创建对象时设置标题。

componentProps

然后：

async openModal(componentProps) {
    const modal = await this.modalController.create({
        component: ModalComponent,
        componentProps
    });
    return await modal.present();
}

如何根据按钮的点击事件提供此功能的不同道具？

1 个答案: