Question

我正在尝试单击fab时弹出一个表单。我使用的是离子4，但每次单击ion-fab-list中的fab或其他组件时。 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

点击后，您可以立即使用相同的数据立即重新打开另一个晶圆厂。看起来它永远不会消失= D

Answer 2

从按钮中删除System.IO.StreamReader file = new System.IO.StreamReader("important.txt"); while ((line = file.ReadLine()) != null) { string[] array = line.Split(','); int num1 = Int32.Parse(array[3]); if(num1 < 50) { str2 = line.Replace(",", " "); System.Console.WriteLine(str2); counter++; } } file.Close();。 public static void main(String[] args) { Flux<Integer> lower = Flux.just(1, 2, 3, 4, 5); Flux<Integer> upper = Flux.just(6, 7, 8, 9, 10); Flux<Integer> total = Flux.concat(lower, upper); total.subscribe(n -> System.out.println(n * 1)); }做同样的事情。您不需要功能来触发它关闭或打开。实际上，您甚至不需要包含toggleFab()属性，除非您在其他地方使用它，因为它默认为false。这是幕后故事：

命中ion-fab-button会将activated和ion-fab-button更改为isFabListOpen
工厂开业
activated开火，true
toggleFab()和this.isFabListOpen = !this.isFabListOpen现在为假
模块现已关闭

Answer 3

我是这样用JavaScript做到的：

<ion-fab class="remote_controller" vertical="bottom" horizontal="center" slot="fixed">
  <ion-fab-button>
    <ion-icon name="game-controller"></ion-icon>
  </ion-fab-button>
  <ion-fab-list side="top">
    <ion-fab-button id="up" onclick="stop_close(this)">
      <ion-icon name="caret-up"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="bottom">
    <ion-fab-button id="down" onclick="stop_close(this)">
      <ion-icon name="caret-down"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="start">
    <ion-fab-button id="left" onclick="stop_close(this)">
      <ion-icon name="caret-back"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
  <ion-fab-list side="end">
    <ion-fab-button id="right" onclick="stop_close(this)">
      <ion-icon name="caret-forward"></ion-icon>
      </ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

和

<script>
  function stop_close(event){
    $('.remote_controller')[0].activated = false;

    //do stuff with the button
  }
</script>

选择其中的元素时，请防止ion-fab-list关闭

3 个答案: