如何创建与Angular 4兼容的模式弹出窗口

Question

我希望能够创建一个弹出窗口,当选择单选按钮时,该窗口将加载我的某个Angular 4组件.

看来这个问题的答案中列出的方法只与Angular 2兼容.

我不知道从哪里开始,并感谢任何帮助!

Answer 1

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

1)写出父和子模态,好像孩子根本不是模态的,而只是附加*ngIf的内联形式.

使用<my-modal>子的父HTML :

<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;
}

但modalCSS类不会阻止与其下面的页面进行交互.(因此它在技术上创建了一个无模式对话框.)因此,我们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)使用子HTML中的modal和overlay.

<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".

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

子模态可以返回信息,以父母的功能,如上图所示,或者孩子的show()方法可以改为接受回调或返回一个承诺,按口味.

要知道的两件事:

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

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

Answer 2

检查Angular Material Dialogue,这是Plunker

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';


@Component({
  selector: 'dialog-result-example',
  templateUrl: './dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}


@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}