Question

我使用的是动态对话框，并且我希望在页脚上有一些按钮，但是在此组件中似乎只允许文本作为页脚。

                const ref = this.dialogService.open(TermsComponent, {
                    data: {
                        entity: response.IDEntity,
                        user: response.IDUser

                    },
                    header: this.translate.instant('resTerminosCond'),
                    width: '70%',
                    footer: `
                        <button mz-button class="btnLoginAgree" (click)="termsAccepted()" translate>
                            resAceptar
                        </button>
                        <button mz-button class="btnLoginDisagree" (click)="onAcceptTerms(false);" translate>
                            resRechazar
                        </button>`
                });

感谢您的帮助！

Answer 1

对于DynamicDialog，您可以仅使用primeNg类“ ui-dialog-footer”并将按钮放置在其中。

<div class="ui-dialog-footer">
  <button mz-button class="btnLoginAgree" (click)="termsAccepted()" translate>
    resAceptar
  </button>
  <button mz-button class="btnLoginDisagree" (click)="onAcceptTerms(false);" translate>
    resRechazar
  </button>
</div>

Answer 2

像这样使用最新版本的 PrimeNG p- 而不是 ui- 它会起作用。

<div class="p-dialog-footer">

Answer 3

目前primeng没有允许这样做的功能。

但是你可以这样做：首先为动态Dialog设置一个styleClass。

this.ref = this.dialogService.open(TermsComponent, {
  data: {
    entity: response.IDEntity,
    user: response.IDUser

  },
  header: this.translate.instant('resTerminosCond'),
  width: '70%',
  styleClass: 'dynamicDialog',
});

然后在您的 app.component.scss 中删除填充：

::ng-deep .dynamicDialog .p-dialog-content{
    padding: 0
}

然后在您的 TermsComponent.html 添加 2 个类。一个用于内容，另一个用于页脚。

 <div class="container">
      <!-- your content-->
 </div>

 
  <div class="footer">
    <button mz-button class="btnLoginAgree" (click)="termsAccepted()" translate>
      resAceptar
    </button>
    <button mz-button class="btnLoginDisagree" (click)="onAcceptTerms(false);" translate>
      resRechazar
    </button>
  </div>

最后是TermsComponent.scss：

:host {
  .container {
    padding: 3rem 1.5rem 2rem 1.5rem;
  }

  .footer {
    border-top: 0;
    background: white;
    padding: 1rem;
    text-align: right;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    display: flex;
    justify-content: flex-end;
  }

  .footer button {
    margin: 0 .5rem 0 0;
    width: auto;
  }
}

动态对话框上的页脚按钮

3 个答案: