Angular7升级到11后PrimeNg的p-dialog组件Breakpoint属性废弃如何修复？

报错原因 #

Breakpoint property is not utilized and deprecated, use breakpoints or CSS media queries instead.

该报错是PrimeNg适配Angular 11的版本迭代中，废弃了p-dialog组件原来的单值响应式属性breakpoint，替换为支持多断点配置的breakpoints属性，也可以选择用原生CSS媒体查询实现响应式效果。

修复方案 #

你可以根据业务需求任选以下方案处理：

• 方案1：替换为新的breakpoints属性
  原来的breakpoint属性逻辑为「视口宽度小于等于设定值时，对话框自动变为全屏宽度」，新属性采用对象格式，键为断点宽度，值为对应断点下的对话框宽度，可配置多套规则。
  比如原来你的breakpoint变量值为'768px'，将原代码中的[breakpoint]="breakpoint"替换为：

  [breakpoints]="{breakpoint: '100vw'}"
  

  如果需要多断点适配可按如下格式配置：

  [breakpoints]="{'1200px': '70vw', '960px': '85vw', '768px': '100vw'}"
  

  修改后的完整组件代码示例：

  <p-dialog #dialogElement [header]=header [(visible)]="visible" [resizable]="false" [style]="style" [breakpoints]="{breakpoint: '100vw'}" (onHide)="onHide($event)" [contentStyle]="contentStyle" [blockScroll]="true" [modal]="true" appendTo="body">
    <div [ngStyle]="{'min-height':minHeight, 'height': height}">
      <ng-content select="[mp-selector-window-content]"></ng-content>
    </div>
  </p-dialog>
  

  注意：原代码中[resizable]="false"和[contentStyle]="contentStyle"后缺少空格，可能引发模板解析报错，建议补充

• 方案2：使用CSS媒体查询实现响应式（灵活度更高）
  给p-dialog添加自定义样式类：

  <p-dialog #dialogElement styleClass="custom-dialog" ...其他属性省略>
  

  在全局样式或组件样式中添加媒体查询规则：

  /* 示例：视口宽度小于768px时对话框全屏 */
  @media screen and (max-width: 768px) {
    .custom-dialog .p-dialog {
      width: 100vw !important;
      margin: 0;
      min-height: 100vh;
    }
  }
  

• 如果你不需要对话框的响应式适配效果，直接删除原代码中的[breakpoint]="breakpoint"属性即可消除报错。

内容的提问来源于stack exchange，提问作者kenzolek