代码之家 › 专栏 › 技术社区 › Apple Orange

如何在角度2中动态设置宽度和高度

angular5 angular

0

Apple Orange · 技术社区 · 8 年前

我已经创建了全局弹出式组件。我想动态设置宽度和高度以及标题。怎么做? 情态动词:

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

1 回复 | 直到 8 年前

1

4

Apple Orange 8 年前

你可以用 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>