【Ionic4】ion-item-slidingでOptionsをタップした際にスライドを閉じたい場合は、`closeSlidingItems()`を使う。

ドキュメントのion-item-slidingだけ見て実装するとスライドが閉じない

例えばOptionsをEditボタンだとして、タップしたときにモーダルを開くようなUIを作るとする。
※ソースコードは大事なところだけ切り抜いてます。

list.page.html

<ion-content>
    <ion-list>
        <ion-item-sliding *ngFor="let book of bookList; let i = index">
            <ion-item>
                <ion-label class="ion-text-wrap" color="dark">{{book}}</ion-label>
            </ion-item>
            <ion-item-options>
                <ion-item-option color="medium" (click)="openEditModal(book)">
                    <ion-icon name="create"></ion-icon>
                    Edit
                </ion-item-option>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

list.page.ts

    constructor(private modal: ModalController) { }

    public async openEditModal(book: string) {
        const m = await this.modal.create({
            component: ModifyModalComponent,
            componentProps: { book }
        });
        return await m.present();
    }

このままだと、モーダルを閉じたときにスライドのOptionsが開きっぱなしになる。

closeSlidingItems()を使ってみる

まずはion-listに変数を追加。

list.page.html

<ion-content>
    <ion-list #slidingList> <!-- ←追加 -->
        <ion-item-sliding *ngFor="let book of bookList; let i = index">
            <ion-item>
                <ion-label class="ion-text-wrap" color="dark">{{book}}</ion-label>
            </ion-item>
            <ion-item-options>
                <ion-item-option color="medium" (click)="openEditModal(book)">
                    <ion-icon name="create"></ion-icon>
                    Edit
                </ion-item-option>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

page(またはcomponent)のClassのプロパティに@ViewChildを追加。(ts-ignoreしないと怒られる)
そのあとモーダルを開く処理の中に、リスト内のSlidingItemを閉じるメソッド、closeSlidingItems()を呼び出す。
これでモーダルを開いたときにスライドが閉じるようになる。

list.page.ts

    // ↓ 追加
    // @ts-ignore
    @ViewChild('slidingList') slidingList;

    constructor(private modal: ModalController) { }

    public async openEditModal(book: string) {
        const m = await this.modal.create({
            component: ModifyModalComponent,
            componentProps: { book }
        });

        // ↓ 追加
        await this.slidingList.closeSlidingItems();
        return await m.present();
    }

参考

Sliding not working after empty an element in array - peterpeterparker commented

余談

ドキュメントをよく見たら、ion-listのほうに書いてありました。
ion-list #method

If ion-item-sliding are used inside the list, this method closes any open sliding item.
Returns true if an actual ion-item-sliding is closed

ion-item-slidingの方に書いてあるとかリンク貼ってあるとわかりやすいんだよなぁ…。