时间戳

首页 > 解决方案 > 如何在角度 2 中为我的模态弹出窗口设置宽度和高度

angular - 如何在角度 2 中为我的模态弹出窗口设置宽度和高度

问题描述

我正在尝试为我的模态设置高度和宽度。我该怎么做？

方式1：

 <button (click)="showDialog = !showDialog" class="btn">Open</button>

  <app-dialog [(visible)]="showDialog" [height]="200" [width]="250">
<h1>Hello World</h1>
<button (click)="showDialog = !showDialog" class="btn">Close</button>
  </app-dialog>

标签： angularangular6

解决方案

添加 Input 属性绑定以向对话框添加动态宽度

<app-dialog [height]="200" [width]="200"   [(visible)]="showDialog">
    <h1>Hello World</h1>
    <button (click)="showDialog = !showDialog" class="btn">Close</button>
</app-dialog>

对话框.html

<div [@dialog] *ngIf="visible" class="dialog" [ngStyle]="{width:width+'px',height:height+'px'}">

    <ng-content></ng-content>
    <button *ngIf="closable" (click)="close()" aria-label="Close" class="dialog__close-btn">X</button>
</div>
<div *ngIf="visible" class="overlay" (click)="close()"></div>

示例：https ://stackblitz.com/edit/angular-rdjxwy

推荐阅读