javascript - Ionic 4 Fab List 默认打开

Question

我正在处理一个带有晶圆厂列表的新 Ionic 4 项目。此列表工作正常，但我希望默认情况下打开它。

我在这里读了一些东西，但代码在 Ionic 4 上不起作用。

有人可以告诉我解决方案吗？谢谢!

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-fab vertical="bottom" horizontal="start" slot="fixed" #fab >
    <ion-fab-button>
      <ion-icon name="arrow-dropup-circle"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">

        <ion-fab-button>
            <ion-icon name="navigate"  (click) ="this.startNavigation()" ></ion-icon>
          </ion-fab-button>

    <ion-fab-button>
      <ion-icon name="thumbs-down" (click) ="this.doRating('-1')"></ion-icon>
    </ion-fab-button>

    <ion-fab-button>
      <ion-icon name="thumbs-up" (click) ="this.doRating('1')"></ion-icon>
    </ion-fab-button>
    </ion-fab-list>
  </ion-fab>
</ion-content>

page.ts 文件如下所示:

import { Component,ViewChild } from '@angular/core';
import { IonFabList } from '@ionic/angular'

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  @ViewChild('IonFabList',{static: false}) fab: IonFabList;

  constructor() {}

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

}

Answer 1

您需要设置 activated ion-fab 上的属性(property)元素。

<ion-fab vertical="bottom" horizontal="start" slot="fixed" activated="true" #fab >
</ion-fab>

看看 ion-fab docs