昨天提到想做彈窗，不過我們沒有使用 PrimeNG，
所以得自己實現彈窗元件。
首先，我們需要建立一個 DialogService 來集中管理彈窗的狀態。
這個服務將負責控制彈窗的開啟與關閉，
並讓其他組件能夠訂閱彈窗的可見性狀態。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class DialogService
{
    private dialogVisibility = new Subject<boolean>(); // 管理彈窗可見性的Subject
    dialogVisibility$ = this.dialogVisibility.asObservable(); // 讓其他組件訂閱可見性狀態

    openDialog()
    {
        this.dialogVisibility.next(true); // 打開彈窗
    }

    closeDialog()
    {
        this.dialogVisibility.next(false); // 關閉彈窗
    }
}

接著，我們需要新建 dialog.component 來作為彈窗的視圖和邏輯。
這個元件將接收 DialogService 的狀態變化，
並根據狀態顯示或隱藏彈窗。

// dialog.component.html
<div class="modal" *ngIf="isVisible">
  <div class="modal-content">
    <span class="close-button" (click)="close()">&times;</span>
    <ng-content></ng-content>
    <!-- 可插入的自定義內容 -->
  </div>
</div>
// dialog.component.ts
import { Component, OnInit } from '@angular/core';
import { DialogService } from 'src/app/shared/service/dialog.service';

@Component({
    selector: 'app-dialog',
    templateUrl: './dialog.component.html',
    styleUrls: ['./dialog.component.scss']
})
export class DialogComponent implements OnInit
{

    isVisible: boolean = false; // 本地的彈窗狀態

    constructor(private dialogService: DialogService) { }

    ngOnInit(): void
    {
        // 訂閱服務的可見性狀態變更
        this.dialogService.dialogVisibility$.subscribe(isVisible =>
        {
            this.isVisible = isVisible;
        });
    }

    close()
    {
        this.dialogService.closeDialog(); // 調用服務關閉彈窗
    }
}

在 element.module.ts 中，
記得將 DialogComponent 加到 exports 中，
這樣可以在其他模組中使用這個元件。

接下來，我們在 main.component 中測試彈窗。
將彈窗的模板放在 app.component 之下，
並且透過按鈕來控制彈窗的顯示與隱藏。
我們使用 DialogService 來管理彈窗的狀態，
因此可以在按鈕中調用 openDialog() 來打開彈窗。

// main.component.html

<div class="container" *ngIf="pageSettings">
  <app-form-input [pageSetting]="pageSettings[page]"> </app-form-input>
  <button (click)="pagePrev()">上一頁</button>
  <button (click)="pageNext()">下一頁</button>
  <button (click)="open()">彈窗</button>
</div>

// main.component.ts
    open()
    {
        this.dialogService.openDialog();
    }

這樣彈窗的元件雛型就完成了，
接下來我們可以進一步調整彈窗的內容和邏輯，
以符合我們的 list 邏輯需求。
今日程式:day26