Question

我正在尝试通过documentation中指示的class属性动态更改bs模态大小，但似乎无法使其更改大小。

这是我的html：

<div class="modal fade" id="imola-small-modal" bsModal #registrationModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" id="imola-small-modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left" i18n>{{PopupContent.PopupText}}</h4>
                <button type="button" class="close pull-right" aria-label="Close" (click)="registrationModal.hide()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" (click)="$event.stopPropagation(); false;">
                <div [dynamiccontent]="PopupContent.BodyRichtext"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" (click)="PopupContent.OnOkay(); registrationModal.hide();" i18n>{{PopupContent.OkaybuttonLabel}}</button>
                <button class="btn btn-default" *ngIf="PopupContent.IsCloseButtonShown" (click)="registrationModal.hide();" i18n>Close</button>
            </div>
        </div>
    </div>
</div>

这是appcomponent.ts：

@ViewChild('registrationModal') public registrationModal: ModalDirective;

public ngOnInit(){
            this.registrationModal.config = new ModalOptions();
            this.registrationModal.config.class = 'modal-lg';
            this.registrationModal.show();

}

所以模态正在显示，但始终是小模态（正如我在html中对其进行硬编码）。有什么建议

Answer 1

我不清楚模型属性（config.class），因为此属性未在模板html中使用。

但是我可以解决您的问题。

您需要为模型大小创建一个属性，即类名，并在运行时应用该类名，以便获得预期的输出。

赞–

您需要在行下方进行更改

发件人

<div class="modal-dialog modal-sm">

收件人

<div class="modal-dialog {{modelClass}}">

在.ts端，您需要创建公共属性

modelClass:string="modal-sm";

并在ngOnInit事件中更改此属性。

public ngOnInit(){
   this.modelClass = "modal-lg";

角度4模态指令更改大小

1 个答案: