我已经创建了全局弹出组件,我想动态设置宽度和高度以及标题,怎么做? 模态:
<app-m [(visible)]="show" title="Modal" data-popup="width:300;height:250">
<h1>Sample Title 1</h1>
<button (click)="show= !show" class="btn">Close</button>
</app-m>
答案 0 :(得分:4)
您可以使用decorators
进行操作。像这样将高度,宽度和标题模型传递给<app-dialog>
:
dialog.component.html
中的现在应该是:
<div [@modal] *ngIf="visible" class="dialog" [ngStyle]="{'width': width+'px', 'height': height+'px'}">
<b>{{title}}</b>
<ng-content></ng-content>
<button *ngIf="closable" (click)="close()" aria-label="Close" class="cls">X</button>
</div>
<div *ngIf="visible" class="overlay" (click)="close()"></div>