igxGrid行高设置与igxDialog消息换行相关问题咨询

1. igxGrid行高设置 #

你可以通过两种方式自定义igxGrid的行高：

• 全局统一设置行高：借助组件内置CSS变量修改，在对应组件的样式文件中添加以下代码：

::ng-deep igx-grid {
  /* 数值可根据需求调整 */
  --igx-grid-row-height: 60px;
}

• 自定义行样式动态设置：使用igxGrid提供的rowStyles输入属性配置行高
  TS文件代码：

// 自定义行样式规则
public gridRowStyles = {
  height: '60px'
}

模板代码：

<igx-grid [rowStyles]="gridRowStyles" [data]="gridData" ...>
  <!-- 列定义等其余配置 -->
</igx-grid>

2. igxDialog消息内容换行 #

默认igxDialog的message输入属性会对传入的字符串做转义处理，所以\n、<br>都无法生效，可通过以下两种方案解决：

• 方案一：使用内容插槽自定义消息内容（更推荐）
  通过igxDialogContent指令插入自定义HTML结构，直接通过块级元素实现换行，示例代码如下：

<igx-dialog #confirmDialog title="确认操作">
  <ng-template igxDialogContent>
    <div>第一句提示消息</div>
    <div>第二句提示消息</div>
    <div>第三句提示消息</div>
  </ng-template>
  <igx-dialog-actions>
    <button igxButton="flat" (click)="confirmDialog.close()">取消</button>
    <button igxButton="raised" igxType="primary" (click)="confirmAction()">确认</button>
  </igx-dialog-actions>
</igx-dialog>

• 方案二：修改样式适配\n换行
  如果要继续使用message属性传值，可添加以下样式修改内容区的换行规则，之后传入的\n就会被识别为换行符：

::ng-deep .igx-dialog__content {
  white-space: pre-line;
}

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