如何将 Ion Slide 设置为仅由首次用户查看一次？

Question

我目前使用的是 ionic 4 和 Angular 8。

如何通过 ion 幻灯片实现仅由首次用户查看一次？我在 Ionic 1/2 上看到了很多解决方案和方法，但在 ionic 4 上没有看到。请指教。

Answer 1

这是一种可能的解决方案。它涉及使用本地存储。只需将键/值对存储在存储中，并在应用程序启动时查找它即可。如果该键存在，则不显示滑块。下面是其实现的示例。这没有经过微调，但希望能传达要点......

确保您已启用离子电容器。如果不这样做，请运行以下命令：

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>

希望这可以帮助。