关于ngx-datatable no data empty message自定义模板解决方案

背景：由于ngx-dataable插件默认没有数据时显示的文案是no data to display，且没有任何样式。这里希望通过自定义模板来实现。但目前github中有一个案例是通过设置代码：

https://swimlane.github.io/ngx-datatable/empty**

      <ngx-datatable
        class="material"
        [rows]="[]"
        [columns]="columns"
        [columnMode]="ColumnMode.force"
        [headerHeight]="50"
        [footerHeight]="50"
      >
        <div empty-content style="text-align: center;"
          >My custom empty component<br />uses two lines.</div
        >
      </ngx-datatable>

我尝试了下，没有效果估计是要angular17+以上吧，而我目前对于升级angular不太被支持，因此有了以下成功的解决方案，即嵌入一个自定义模板：

当前版本：angular16+ts+“@swimlane/ngx-datatable”: “^20.1.0”

html

          <ngx-datatable
          ......
            [messages]="messages"
            >
            </ngx-datatable>

ts

  messages = {
    emptyMessage: `
    <div id="ngxEmptyMessage" class="ngxEmptyMessage">
      <img class="emptyImg" src="./assets/icons/icon_frame.png">
      <span class="emptyMessage">No results</span>
    </div>
  `
  }

sass/css

::ng-deep .ngxEmptyMessage
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  .emptyMessage
    color: #999
    font-size: 14px
    line-height: 22px
    margin-top: 8px
  .emptyImg
    width: 42px
    height: 42px
::ng-deep .ngx-datatable.material .empty-row
  height: auto
  padding: 130px 0

效果如图：

如果要给文案加上国际化，比如{{‘common.no-data’|translate}}，是不可行的，解决方式如下：

只贴基于上面修改到的代码：核心就是改成${this.translate.instant(‘common.no-data’)}，然后添加监控，实时获取国际化

import {TranslateService} from "@ngx-translate/core";
  messages = {
      emptyMessage: `
        <div id="ngxEmptyMessage" class="ngxEmptyMessage">
          <img class="emptyImg" src="./assets/icons/icon_frame.png">
          <span class="emptyMessage">${this.translate.instant('common.no-data')}</span>
        </div>
  `};
  constructor(private translate: TranslateService  ) {
  }
  ngOnInit(): void {
      this.translate.onLangChange.subscribe(() => {
        this.updateEmptyMessage();
      });
  }
  updateEmptyMessage() {
    this.translate.get('common.no-data').subscribe((translation: string) => {
      this.messages = {
        emptyMessage: `
          <div id="ngxEmptyMessage" class="ngxEmptyMessage">
            <img class="emptyImg" src="./assets/icons/icon_frame.png">
            <span class="emptyMessage">${this.translate.instant('common.no-data')}</span>
          </div>
        `
      };
    });
  }