Angular 單擊背景和內容時模式關閉

Question

我創建了一個名為 Modal 的小型 Angular 組件，將其用作我的應用程序上的模式。 單擊頁面上的按鈕時模式打開，單擊背景或取消按鈕時應關閉。

現在在單擊頁面上的按鈕時打開（好）並在單擊背景時關閉（好）我的問題是當我單擊內容時關閉（壞）。

為了管理模式何時打開或關閉，我在頁面 controller 上定義了一個變量，該變量從 false 開始，當單擊按鈕切換為 true 並顯示模式時。 單擊背景時，相同的 function 會將變量切換回 false。

這是我的board-page.component.ts ：

export class BoardPageComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}

  isModalShown: boolean = false;

  newTask() {
    console.log(`Click Modal!`);
    this.isModalShown ? this.isModalShown = false : this.isModalShown = true;
  }
}

這是board-page.component.html ：

<app-modal *ngIf="isModalShown" (close)="newTask()">
  <h1>Modal Content</h1>
</app-modal> 

這是modal組件modal.component.ts ：

export class ModalComponent implements OnInit {
  @Output() close = new EventEmitter();

  constructor() {}

  ngOnInit(): void {
  }

  onClose() {
    this.close.emit();
  }
}

和modal.component.html

<div class="modal-backdrop" (click)="onClose()">
  <div class="modal-content" id='modal'>
    <ng-content></ng-content>
  </div>
</div>

我已將點擊事件放在背景上，但似乎在點擊內容時會觸發點擊事件，因為 z-index 更高。 當單擊事件被觸發時，將發送到更新 isModalShown 值的父組件中的 function。

以及制作背景和內容效果的styles：

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 20;
  background-color: rgba(0, 0, 0, 0.75);
}

.modal-content {
  position: fixed;
  top: 15vh;
  left: 5%;
  width: 90%;
  background-color: white;
  padding: 1rem;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 30;
  animation: slide-down 300ms ease-out forwards;

  pointer-events: none;
}

@media (min-width: 768px) {
  .modal-content {
    width: 40rem;
    left: calc(50% - 20rem);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-3rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

我想我應該禁用內容上的點擊事件？ 我試過這個：

document.getElementById('modal').addEventListener('click', (event) => {  
  event.preventDefault();  
});

但是沒有用。

在沒有第 3 方庫的情況下，我沒有找到很多示例來執行此模式。

編輯：我也嘗試過像這篇文章這樣的自定義指令： Stop mouse event propagation but didn't work。

Answer 1

您應該做兩件事：

1. 您應該防止從內容部分傳播事件，如下所示

<div class="modal-backdrop" (click)="onClose()">
  <div class="modal-content" (click)="$event.stopPropagation()" id="modalmodal">
    <ng-content></ng-content>
  </div>
</div>

2. 您應該從 styles pointer-events: none for.modal-content 中刪除，這就是為什么事件沒有在您的內容部分中注冊並且您只是以這種方式單擊背景 div。

.modal-content {
  position: fixed;
  top: 15vh;
  left: 5%;
  width: 90%;
  background-color: white;
  padding: 1rem;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 30;
  animation: slide-down 300ms ease-out forwards;

  pointer-events: none; // remove this line
}