Question

我的Angular 2网络应用程序中有以下警告：

HTML

               <!Doctype html>
                <html>
                <head>
                <title></title>
                <Style type="text/css">
                #header{border:1px solid #000;}
                #new{ border:1px solid #000;
                background-color:green;}
                </style>
                </head>
                <body>
                <script></script>
                <div id="header">
                <h1>...</h1>
                </div><br>
                <div id="new">
                 <input type="text" name="JDate" placeholder="OnBoardDate"><br>
                 <input type="text" name="RDate" placeholder="ReturnDate"><br>
                 
                </div>
                </body>
                </html>

当我点击DOM中的任何其他位置时，如何编写关闭此警报的TS方法？不知道怎么做到这一点。我是否需要从DOM中的每个其他元素调用此函数，或者有解决方法吗？

Answer 1

解决此问题的方法之一是创建额外的＆＃34; overlay＆＃34;元素，基本上位于DOM中的模态下方。你的HTML应该看起来像：

<div class="overlay" (click)="this.MiddleC = false"></div>
<div class="alert alert-primary alert-dismissible fade show" role="alert" *ngIf="this.MiddleC == true">
  <strong>YES!!! That's Middle C!!!</strong>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

然后css：

.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: MODAL_ZINDEX - 1;
}

接近它的第二种方法，可能是@HostListener，这应该可行：

@HostListener('window:click', ['$event'])
onWindowClick($event){
  //check if its not modal that is clicked
}

https://angular.io/api/core/HostListener

通过单击警报外部来解除Angular 2+中的bootstrap警报

1 个答案: