單擊模式內的按鈕時如何在 Angular 7 中隱藏組件？

Question

從標題組件中的一個按鈕我正在調用 Angular Material 的模態，在這個模態中有一個按鈕輸入，我需要當點擊這個按鈕時，一個名為橫幅的組件將被隱藏。

我的 app.component.html 具有以下結構：

<app-header></app-header>
<app-banner></app-banner>

modal.component.html 具有以下結構：

 <p class="title"> Enter <span class="close" mat-raised-button (click)="save()"><i class="fas fa-times-circle"></i></span> </p> <form class="dialog-enter"> <table> <tr> <td colspan="2"> <input type="text" placeholder="E-mail or phone number" /> </td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> <tr> <td colspan="2"> <input type="password" placeholder="Password" /> </td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> <tr> <td colspan="2"> <button class="enter">Enter</button> </td> </tr> <tr> <td class="remember"> <mat-checkbox>Remember me</mat-checkbox> </td> <td class="help"> <a href="javascript:void">Need help?</a> </td> </tr> <tr> <td colspan="2">&nbsp;</td> </tr> <tr> <td colspan="2"> <p class="title">New for here?</p> <button class="buy">Buy now!</button> </td> </tr> </table> </form>

Answer 1

一種方法是使用ngIf並將其綁定到變量。 NgIf 僅在您給它的代碼評估為真時才顯示該元素。 例如，您可以使用名為 showBanner 的變量。

你的 html 看起來像：

<app-header></app-header>
<app-banner *ngIf="showBanner === true"></app-banner>

這只會在 showBanner === true 時顯示您的應用橫幅。

然后在您的 app.component.ts 中，您希望有一個名為 showBanner 的屬性並將其初始化為 true（假設您希望橫幅默認顯示）。

在您的 modal.component.ts 中，您可以添加一個EventEmitter （為了簡單起見，我將其稱為提交），它會告訴訂閱它的任何人輸入已被點擊。 在 ModalComponent 類的開頭，您可以創建一個名為 submit 的屬性並像這樣初始化它：

submit = new EventEmitter()

然后在用戶單擊 enter 時調用的 save 方法中，您可以發出一個事件，以便訂閱者沒有點擊它：

save() {
   this.submit.emit(true);
}

然后回到你的 app.component.ts 中，我相信你正在打開你的對話框，你也可以訂閱提交事件。 從模式發出事件后，您可以將 showBanner 設置為 true。 您想以打開對話框的相同方法執行此操作，但在 dialog.open 之后：

const self = this;
dialog.componentInstance.submit.subscribe({
   next(value) {
      self.showBanner = false;
   }
});

對於以后的帖子，如果您顯示了所有涉及的文件的代碼，那么回答問題會更容易。 在這種情況下， app.component.ts 和 model.component.ts 將有助於人們試圖幫助您回答問題，而不必自己從頭開始創建一些東西。 如果您使用附加信息更新您的帖子，我或其他人可能會留下更好的答案。 我是回答問題的新手，所以這對我來說也是新的。 希望這可以幫助。

您可以使用輸入/輸出將數據從子組件共享到父組件。 在這種情況下，您要使用輸出。 stackblitz 已更新為使用標頭組件的輸出。

這是我剛剛制作的一個簡單項目的 stackblitz，我認為它與您正在談論的Stackblitz 相似