防止在單擊時關閉對話框

Question

這是我的對話

<div *ngIf="visible" class="overlay" (click)="close()">
    <div role="dialog" class="overlay-content">
        <div class="modal-dialog" (click)="$event.stopPropagation()">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <ng-content></ng-content>
                </div>
                <div class="modal-footer footer-buttons">
                    <button type="button" class="btn btn-default" (click)="confirm()">OK</button>
                    <button type="button" class="btn btn-default" (click)="close()">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

如您可能會看到的最上面的div具有(click)="close()" ，它使對話框在對話框外單擊時關閉，因為下一個div具有(click)="$event.stopPropagation()"它在單擊內部對話框時會停止對話框，但此解決方案是錯誤的。 問題是，如果我在對話框中放置任何選項卡，則由於(click)="$event.stopPropagation() 。更改選項卡將不起作用。有誰知道更好的解決方案嗎？換句話說，如何關閉在外部單擊的對話框對話框，但是在內部單擊時保持打開狀態？

Answer 1

我猜您正在尋找一個指令，該指令將監聽對話框單擊的外部。 這是我的版本：

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private elementRef: ElementRef) {
    }

    @Output()
    clickOutside = new EventEmitter<Event>();

    @HostListener('document:click', ['$event', '$event.target'])
    onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}

並按以下方式使用它：

<div *ngIf="visible" class="overlay" (clickOutside)="visible=false">
....

DEMO

Answer 2

一種選擇是不嵌套疊加層和疊加層內容。

例如：

<div class="overlay"></div>
<div class="overlay-content">/* Content */</div>

CSS：

.overlay {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 5;
background-color: rgba(0,0,0,.6);
}

.overlay-content {
background: white;
position: fixed;
width: 50%;
height: 50%;
margin-left: 25%;
margin-top: 5%;
z-index: 10;
}

codepen： https ：//codepen.io/bgraham626/pen/VMZxON