如何将 Ion Slide 设置为仅供 FIRST TIME 用户查看一次？

Question

我目前正在使用 ionic 4 和 angular 8。

如何实现 ion slides 只能被初次使用的用户查看一次？我已经看到很多关于如何在 Ionic 1/2 上执行此操作的解决方案和方法，但我在 ionic 4 上看到 none。请指教。

Answer 1

这是一种可能的解决方案。它涉及使用本地存储。只需将 key/value 对存储在存储中，并在应用程序启动时查找它。如果密钥存在，则不显示滑块。下面是其实现的一个例子。这不是微调，但希望能说明问题...

确保您启用了离子电容器。如果没有，运行这个命令：

ionic integrations enable capacitor

然后安装 Ionic Storage 和 Sqlite

 npm install @ionic/storage --save
 npm install cordova-sqlite-storage --save

在 app.module.ts

中导入离子存储

... all of your other imports
import {IonicStorageModule} from '@ionic/storage';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
            ... all of your other imports, 
            IonicStorageModule.forRoot()
           ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})

创建存储服务

ionic g service storage

添加几个函数来获取和保存到存储。

storage.service.ts

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  firstTime: boolean;

  constructor(private storage: Storage) { }

  saveFirstTimeLoad(): void {
    this.storage.set('firstTime', true);
  }

  isFirstTimeLoad(): void {
    this.storage.get("firstTime").then((result) => {
      if (result != null) {
        this.firstTime = false;
      }
      else {
        this.firstTime = true;
      }
    })
  }
}

在app.component.ts

中初始化服务

... all of the other imports
import { StorageService } from './storage.service';

export class AppComponent {
    constructor(... all of the other initializations,
                private storageService: StorageService) {
        this.storageService.isFirstTimeLoad();
    }

然后在您的页面组件中分配一个属性以在 html

中使用

export class HomePage implements OnInit {

  firstTime: boolean;
  constructor(private storageService: StorageService) {  }

  ngOnInit() {
    this.firstTime = this.storageService.firstTime;  

    //if first time update first time 
    if(this.firstTime){
      this.storageService.saveFirstTimeLoad();
    }
  }

}

最后使用一个 ngIf 来决定是否渲染组件。

<ion-item *ngIf="firstTime">
  <ion-label>
     First Time!
  </ion-label>
</ion-item>
<ion-item *ngIf="!firstTime">
  <ion-label>
    NOT First Time
  </ion-label>
</ion-item>

希望对您有所帮助。

如何将 Ion Slide 设置为仅供 FIRST TIME 用户查看一次？

How to set Ion Slide to only view once by FIRST TIME users?

ionic-framework

angular

ionic4