帶有圖像的模態對話框僅在用戶第一次加載頁面時顯示

Question

大家好，我是前端開發的新手，我正在使用 Angular 11、Angular 材料和 Bootstrap 進行項目，我的問題是我想在用戶第一次加載主頁時顯示一個彈出窗口和廣告，模態對話框是在 angular 材料中制作的，我在 ads 組件中有模態對話框，然后在 ngOnInit 的主頁組件中調用它，因此對話框將在用戶加載主頁時顯示，我找到了一些使用 JS 的解決方案，但沒有不讓他們為我工作，我該如何解決這個問題有什么幫助嗎？

我的廣告組件 html，我只顯示圖像，沒有關閉模式的按鈕，但如果我需要為解決方案添加按鈕，我可以添加按鈕。

<mat-dialog-content id="myModal" class="gradient-border">
  <img style="max-width: 100%;" src="../../../assets/img/modal-ad.jpg">
</mat-dialog-content>

廣告組件 ts

import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';


@Component({
  selector: 'app-anuncios',
  templateUrl: './anuncios.component.html',
  styleUrls: ['./anuncios.component.css']
})


export class AnunciosComponent implements OnInit {

  constructor(public dialogRef: MatDialogRef<AnunciosComponent>) { }

  ngOnInit(): void {
  }
}

家庭組件 ts

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AnunciosComponent } from '../anuncios/anuncios.component';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})



export class HomeComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

  ngOnInit(): void {
    this.showDialog();
  }

  showDialog(){

    const dialogRef = this.dialog.open(AnunciosComponent, {
      maxWidth: "100vw", 
      maxHeight: "150vw",
      panelClass: ['animate__animated','animate__bounceInDown']
    
    }); 
  }

  
}

所以這段代碼使模態對話框總是在主頁加載時顯示，我需要在用戶第一次加載主頁時顯示它，我看到一些使用 cookies 或 JS 函數的解決方案，但沒有讓它們對我有用，正如我所說，我是新手，我認為我沒有為我的項目正確使用這些解決方案，任何建議都將不勝感激。

Answer 1

如果為了實現您的意思，您需要“記住”用戶是否已經看到了對話框。

現在我還有一個問題要問你：

1. 用戶是否需要在每次頁面加載時都看到這個？
2. 一次又一次？
3. 每次他在您的網站上發起 session 時？ （打開瀏覽器瀏覽您的網站）

如果您的用例類似於選項 1，那么您可能只有一個內部變量。 您可以使用static變量和 boolean 或使用 ZC31C335EF37283CDE1ZDDB 的 singleton 服務。

@Component({...})
export class MyComponent {
  public static hasAdvertBeenShown = false

  ngOnInit() {
     if(!MyComponent.hasAdvertBeenShown) {
        this.matRef.showDialog()
        MyComponent.hasAdvertBeenShown = true
     }
  }

}

如果您的用例是在用戶第一次瀏覽您的網站時顯示廣告，那么您的變量將存儲在localStorage中，並且它可以在打開和關閉瀏覽器時繼續存在。

@Component({...})
export class MyComponent {
  public static hasAdvertBeenShown = MyComponent.hasAdvertBeenShownBefore()

  ngOnInit() {
     if(!MyComponent.hasAdvertBeenShown) {
        this.matRef.showDialog()
        MyComponent.markAsSeen()
     }
  }

  public static boolean hasAdvertBeenShownBefore() {
    return JSON.parse(localStorage.getItem('advert'))
  }
  public static boolean markAsSeen() {
    localStorage.setItem('advert', true)
  }

}

如果您的用例是后者，那么使用sessionStorage類似於localStorage但它的壽命較短（每個會話）

@Component({...})
export class MyComponent {
  public static hasAdvertBeenShown = MyComponent.hasAdvertBeenShownBefore()

  ngOnInit() {
     if(!MyComponent.hasAdvertBeenShown) {
        this.matRef.showDialog()
        MyComponent.markAsSeen()
     }
  }

  public static boolean hasAdvertBeenShownBefore() {
    return JSON.parse(sessionStorage.getItem('advert'))
  }
  public static boolean markAsSeen() {
    sessionStorage.setItem('advert', true)
  }

}

如果您想了解更多關於本地和 session 存儲的信息，您可以在此處閱讀

這是我通常在我的應用程序中做的事情

每當我需要將某些內容存儲到 localStorage 中時，就讓它成為首選項（用戶設置、暗模式等），並且我希望它能夠在瀏覽器重新啟動后繼續存在，我需要使用 localStorage。

由於使用原始 localStorage 很容易變得混亂，我所做的只是創建一個 singleton “UserSettingsService”，它包裝了“低級”本地存儲邏輯，以便我可以在代碼庫中共享它：

@Inject({providedIn: 'root'})
export class SettingsService {
  private storage: Storage = localStorage // Change this based on your use-case

  public markAdvertisementAsShown() {
    this.storage.setItem('advert', true)
  }

  public boolean hasAdvertisementBeenShown() {
    const safeBoolean = this.storage.getItem('advert') ?? 'false' // defaulting to false in case it didnt exist
    return JSON.parse(safeBoolean)
  }

}

然后在我的其他課程上：

@Component({...})
export class SomeComponent {
   hasAdvertBeenShown = this.adverts.hasAdvertisementBeenShown()
  constructor(private matRef: Mat..., private adverts: AdvertService){}

  ngOnInit() {
    if(!this.hasAdvertBeenShown) {
      // do something like showing the advert
      this.adverts.markAdverisementAsShown()
    }
  }
}

對於 boolean 來說，這似乎有點矯枉過正，但應用程序往往會變得越來越復雜。 就像您稍后想要顯示的 3 個不同的廣告一樣，您需要確定您顯示的是哪一個。 現在您不會序列化 boolean 而是序列化已顯示的廣告 object。 邏輯變得更加復雜，但是因為它在服務中，所以您只需在那里更改它，然后在整個應用程序中再次運行它！