Предотвращение закрытия ion-fab-списка при выборе элемента в нем

Question

Я пытаюсь сделать форму всплывающей при нажатии на потрясающий.Я использую ionic 4, но каждый раз, когда щелкает потрясающий или другой компонент в ion-fab-list.ion-fab-list автоматически закрывается.Как я могу нажать на элемент и предотвратить его закрытие

Я пытался использовать @ViewChild, но он не работает.Одна вещь, которую я заметил о @ViewChild декораторе, это то, что ему требовалось два параметра, которые я не видел, чтобы другие решения делали.

form.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { NavController, IonFab } from '@ionic/angular'

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
})
export class FormComponent implements OnInit {
  isFabListOpen = false

  toggleFab(): void {
    this.isFabListOpen = !this.isFabListOpen
    console.log('lol')
  }

  constructor() {}

  ngOnInit() {}

}

form.component.scss

ion-fab {
  position: fixed;
  left: 84%;
  float: right;
}

ion-fab-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 350px;
  right: 130px;
}

form.component.html

<ion-fab horizontal="end" vertical="bottom" slot="fixed" [activated]="isFabListOpen">
  <ion-fab-button color="light" (click)="toggleFab()">
    <ion-icon name="arrow-dropleft"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top" [hidden]="isFabListOpen">
    <!-- <ion-fab-button color="light">
      <ion-icon name="logo-facebook"></ion-icon>
    </ion-fab-button>
    <ion-fab-button color="light">
      <ion-icon name="logo-twitter"></ion-icon>
    </ion-fab-button>
    <ion-fab-button color="light">
      <ion-icon name="logo-vimeo"></ion-icon>
    </ion-fab-button> -->
    <form action="">
      <ion-item>
        <ion-label>quote</ion-label>
        <ion-input type="text" placeholder="Awesome Input"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>author</ion-label>
        <ion-input type="text" placeholder="Awesome Input"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>author</ion-label>
        <ion-input type="text" placeholder="Awesome Input"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>day</ion-label>
        <ion-datetime displayFormat="DD MM YY" placeholder="Leave empty to select today"></ion-datetime>
      </ion-item>
      <ion-button>
        Save
      </ion-button>
    </form>
  </ion-fab-list>
</ion-fab>

Список потрясающих объектов должен оставаться даже при нажатии на кнопки или компоненты, но вместо этого закрываться при нажатии.

Answer 1

Удалить toggleFab() с кнопки.ion-fab-button делает то же самое.Вам не нужна функция, чтобы вызвать его, чтобы закрыть или открыть.На самом деле вам даже не нужно включать атрибут activated, если вы не используете его где-то еще, потому что по умолчанию он имеет значение false.Вот что происходит под капотом:

1. Удар ion-fab-button изменяет isFabListOpen & activated на true
2. Потрясающие открытия
3. toggleFab() пожары, this.isFabListOpen = !this.isFabListOpen
4. isFabListOpen & activated теперь ложно
5. Модал теперь закрыт

Answer 2

Вы можете сразу же открыть еще один фаб с теми же данными, как только он будет нажат.Это будет выглядеть так, будто оно никогда не исчезло = D