[英]How to set Ion Slide to only view once by FIRST TIME users?
I am currently using ionic 4 and angular 8.我目前正在使用 ionic 4 和 angular 8。
How do I implement by ion slides to be only viewed once by first-time users?我如何通过离子幻灯片实现只能由第一次使用的用户查看一次? I have seen lots of solutions and ways on how to do it on Ionic 1/2 but I see none on ionic 4. Please advise.
我在 Ionic 1/2 上看到了很多解决方案和方法,但我在 ionic 4 上没有看到。请指教。
Here's one possible solution.这是一种可能的解决方案。 It involves using local storage.
它涉及使用本地存储。 Just store a key/value pair in storage and look it up when the app starts.
只需在存储中存储一个键/值对,并在应用程序启动时查找它。 If the key exists then do not show the slider.
如果键存在,则不显示滑块。 Below is an example of its implementation.
下面是它的实现示例。 This is not fine-tuned but hopefully will get the point across...
这不是微调,但希望能说明这一点......
Be sure you have Ionic Capacitor enabled.确保您启用了离子电容器。 If you do not, run this command:
如果没有,请运行以下命令:
ionic integrations enable capacitor
Then install Ionic Storage and Sqlite然后安装 Ionic Storage 和 Sqlite
npm install @ionic/storage --save
npm install cordova-sqlite-storage --save
import Ionic Storage in app.module.ts
在
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]
})
Create a storage servive创建存储服务
ionic g service storage
Add a couple of functions to get and save to 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;
}
})
}
}
Initialize the service in app.component.ts
在
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();
}
Then in your page component assign a property to use in the html然后在您的页面组件中分配一个属性以在 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();
}
}
}
Finally use an ngIf to decide whether to render the component or not.最后使用 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>
Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.