Question

从标题组件内部的按钮中调用Angular Material的模态，在此模态中有一个Enter按钮，我需要在单击此按钮时隐藏名为banner的组件。

我的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仅在您提供的代码评估为true时显示该元素。例如，您可以使用一个名为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()

然后在用户单击进入时调用的save方法内部，您可以发出一个事件，因此订户没有被单击：

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

然后返回app.component.ts，我相信您会在其中打开对话框，您也可以订阅Submit事件。从模式发出事件后，可以将showBanner设置为true。您要使用与打开对话框相同的方法来执行此操作，但要在对话框之后打开：

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

对于以后的帖子，如果您显示涉及的所有文件的代码，将更容易回答问题。在这种情况下，app.component.ts和model.component.ts将对试图帮助您回答问题的人们有所帮助，而不必自己重新创建。如果您使用其他信息更新您的信息，我或其他人可能会留下更好的答案。我是新来回答问题的人，所以这对我来说也是新的。希望这会有所帮助。

您可以使用Input/Output将数据从子组件共享到父组件。在这种情况下，您要使用输出。 Stackblitz已更新为使用标头组件的输出。

这是我刚刚完成的一个简单项目，我认为它与您所谈论的Stackblitz

类似

单击模态内的按钮时，如何在Angular 7中隐藏组件？

1 个答案: