angular - 如何创建与 Angular 4 兼容的模态弹出窗口

Question

我希望能够创建一个弹出窗口，该窗口将在选中单选按钮时加载我的某个 Angular 4 组件。

看来这个question的答案中列出的方法仅与 Angular 2 兼容。

我不确定从哪里开始，希望得到任何帮助!

Answer 1

已接受的答案对拍苍蝇增加了很大的依赖性。模态(和非模态)对话框主要是一两个 CSS 类的结果。试试这个“重命名...”示例:

1) 编写父模态和子模态，就好像子模态根本不是模态，而只是附加了 *ngIf 的内联形式。

使用 <my-modal> 的父级 HTML child :

<div>
    A div for {{name}}.
    <button type="button" (click)="showModal()">Rename</button>
    <my-modal *ngIf="showIt" [oldname]="name" (close)="closeModal($event)"></my-modal>
</div>

父类。 @Component为简洁起见省略了装饰器。 (name 属性属于父类，即使我们没有修改它的表单也会存在。)

export class AppComponent {
    name = "old name";

    showIt = false;
    showModal() {
        this.showIt = true;
    }
    closeModal(newName: string) {
        this.showIt = false;
        if (newName) this.name = newName;
    }

}

子模态组件。 @Component再次省略装饰器和导入。

export class MyModalComponent {
    @Input() oldname = "";
    @Output() close = new EventEmitter<string>();
    newname = "";

    ngOnInit() {
        // copy all inputs to avoid polluting them
        this.newname = this.oldname; 
    }

    ok() {
        this.close.emit(this.newname);
    }

    cancel() {
        this.close.emit(null);
    }
}

模态化之前的子 HTML。

<div>
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    <button type="button" (click)="ok()">OK</button>
    <button type="button" (click)="cancel()">Cancel</button>
</div>

2) 这是子级的 CSS，但它可以放在全局样式表中以便在整个应用程序中重复使用。这是一个名为 modal 的类用于 <div>元素。

.modal {
    /* detach from rest of the document */
    position: fixed;

    /* center */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* ensure in front of rest of page -- increase as needed */
    z-index: 1001;

    /* visual illusion of being in front -- alter to taste */
    box-shadow: rgba(0,0,0,0.4) 10px 10px 4px;

    /* visual illusion of being a solid object -- alter to taste */
    background-color: lightblue;
    border: 5px solid darkblue;

    /* visual preference of don't crowd the contents -- alter to taste */
    padding: 10px;
}

但是 modal CSS 类不会阻止与其下的页面交互。 (所以它在技术上创建了一个无模式对话框。)所以我们放置了一个 overlay。在模态下方吸收和忽略鼠标事件。 overlay也适用于 <div>元素。

.overlay {
    /* detach from document */
    position: fixed;

    /* ensure in front of rest of page except modal */
    z-index: 1000;

    /* fill screen to catch mice */
    top: 0;
    left: 0;
    width: 9999px;
    height: 9999px;

    /* dim screen 20% -- alter to taste */
    opacity: 0.2;
    background-color: black;
}

3) 使用 modal和 overlay在子 HTML 中。

<div class="modal">
    Rename {{oldname}}
    <input type="text" (change)="newname = $event.target.value;" />
    <button type="button" (click)="ok()">OK</button>
    <button type="button" (click)="cancel()">Cancel</button>
</div>
<div class="overlay"></div>

就是这样。基本上是 2 个 CSS 类，你可以让任何组件成为模态组件。事实上，你可以通过 ngClass 改变 CSS 类的存在来在运行时显示一个内联组件或作为模态。或 [class.modal]="showAsModalBoolean" .

您可以更改它，以便 child 控制显示/隐藏逻辑。将 *ngIf、showIt 和 show() 函数移动到子项中。在父项中添加 @ViewChild(MyModalComponent) renameModal: MyModalComponent;然后 parent 可以强制调用this.renameModal.show(this.name);并根据需要重新连接初始化和包含 div。

child-modal 可以将信息返回给父函数，如上所示，或者子函数的 show()方法可以根据喜好接受回调或返回 Promise。

需要知道的两件事:

this.renameModal.show(..);如果 <my-modal> 上有 *ngIf，将无法工作因为它不会存在以开始公开功能。 *ngIf 删除整个组件，show() 函数和所有，所以使用 [hidden]相反，如果您出于某种原因需要它。

Modals-on-modals 将有 z-index 问题，因为它们都共享相同的 z-index。这可以用 [style.z-index]="calculatedValue" 解决。或类似的。