默认打开 ion-fab-list

Question

我需要在 ionic 页面加载时默认打开 top open ion-fab-list。

请提供一些帮助。

我尝试了以下解决方案但没有奏效：

1.在 .html 中的 fab-button 上写入（单击）事件并从 .ts.

中调用事件

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabButtonClicked(); 
}
fabButtonClicked() {
  console.log('Fab Button clicked.');
}

<ion-fab bottom right #fab class="space-fab-list">
      <button ion-fab #fabBtn mini class="fab-button" [disabled]="!isButtonsFound" (click)="fabButtonClicked()"><ion-icon name="add"></ion-icon></button>
      <ion-fab-list side="top" class="spaces-side-list">
      <button ion-fab *ngFor="let buttonObj of buttonList" class="button-fab-object" (click)="doSomthing(buttonObj)">buttonObj.title</button>
      </ion-fab-list>
</ion-fab>

2。调用FabContainer的setActiveLists方法class

问题：使用此解决方案默认情况下会打开 ion-fab-list，但不会从 *ngFor 填充按钮。已打开空 fab-list。

@ViewChild('fab') fabElement: FabContainer;

ionViewDidEnter() {
  this.calculateButtons();
}

calculateButtons() {
  // buttonList list populated code
  this.fabElement.setActiveLists(true);
}

这个解决方案对我不起作用。

请帮我解决这个问题。

动态生成按钮到 ion-fab-list: 从网络服务中获取的按钮列表

<ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

谢谢，普尼塔

Answer 1

在这里，

组件端：

import { FabContainer } from 'ionic-angular';

@ViewChild('fab')fab : FabContainer;

ionViewDidEnter(){
    this.fab.toggleList();
}

模板端：

<ion-fab top right edge #fab>
    <button ion-fab mini ><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
</ion-fab>

WORKING DEMO

使用将按钮动态生成到 ion-fab-list 中：

组件端：

//Logic is same as above
buttonList = [
    { name : '1'},
    { name : '2'},
    { name : '3'},
    { name : '4'},
    { name : '5'},
]

模板端：

<ion-fab bottom right #fab class="space-fab-list">
  <button ion-fab #fabBtn mini class="fab-button" ><ion-icon name="add"></ion-icon></button>
  <ion-fab-list #fabList side="top" class="side-list">
      <button ion-fab class="space-fab-button home" (click)="openHome()">Home</button>
      <button ion-fab *ngFor="let button of buttonList" class="fab-button" (click)="doSomething(button)">{{ button.name }}</button>
  </ion-fab-list>
</ion-fab>

WORKING DEMO

Answer 2

感谢您的建议。我已经使用 ChangeDetectorRef 解决了这个问题。

在 setActiveLists() 方法执行之前调用 detectChange() 方法

this.changeDetectorRef.detectChanges();
this.fabElement.setActiveLists(true);

谢谢

默认打开 ion-fab-list

By default open ion-fab-list

floating-action-button

ionic3

angular