如何使用 angular renderer2 将 mat-icon 动态添加到 div？

Question

我有一个带有很多 div 的 HTML。我已经生成了看起来像这样的 div。

使用 renderer2 的所需结果的静态 HTML（非动态生成）示例

    <div class="time-rowss clearfixx" #timerowss>
      <div><mat-icon>today</mat-icon> date </div>
    </div>
    <div class="time-rows clearfix" #timerows>
      <div><mat-icon>brightness_3</mat-icon>00:00</div>
      <div><mat-icon>brightness_3</mat-icon>01:00</div>
      <div><mat-icon>brightness_3</mat-icon>02:00</div>
    </div>

我想实现相同但动态生成 div。

到目前为止，我所做的是动态添加时间和日期。

这是我的代码：

for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
  const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
  time = newTime;
  const date = this.renderer.createElement('div');
  this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
  this.renderer.appendChild(this.d7.nativeElement, date);
  for (let i = 0; i < 24; i++) {
    const b = this.renderer.createElement('div');
    const icon = this.renderer.createElement('mat-icon');
    if (i < 7 || i > 18) {
      this.renderer.setAttribute(icon, 'svgIcon', '"brightness_3"');
    } else {
      this.renderer.setProperty(icon, 'svgIcon', '"wb_sunny"');
    }
    let text;
    if (i >= 10) {
      text = ' ' + i;
    } else {
      text = '0' + i;
    }
    this.renderer.appendChild(b, icon);
    this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
    this.renderer.appendChild(this.d3.nativeElement, b);
  }
}

我尝试了几种选择：

• this.renderer.setProperty(icon, 'svgIcon', '"wb_sunny"');

• this.renderer.setProperty(icon, 'svgIcon', 'wb_sunny');

• this.renderer.setAttribute(icon, 'svgIcon', '"brightness_3"');

• this.renderer.setAttribute(icon, 'svgIcon', 'brightness_3');

• this.renderer.appendChild(icon, this.renderer.createText('brightness'));

• this.renderer.appendChild(icon, 'brightness_3');

这些选项都不起作用。我也试过 iconName 而不是 svgIcon。

我应该如何使用 renderer2 添加 iconName 或 svgIcon？

Answer 1

我想到了。当我尝试使用渲染器 createText 添加 mat-icon 值时，我注意到了什么。它正确地添加了它。问题是 IconName 以名称而不是图标的形式出现在 html 中。所以我意识到css丢失了。我查看了开发工具并检查了 div 和 mat-icons。我发现他们缺课。

所以我手动添加了这些类。

简而言之

您需要创建 mat-icon element。

const dateIcon = this.renderer.createElement('mat-icon');

使用 createText 添加值。

this.renderer.appendChild(dateIcon, this.renderer.createText('today'));

为 css 样式提供类。

  this.renderer.addClass(dateIcon, 'mat-icon');
  this.renderer.addClass(dateIcon, 'material-icons');

如果好奇，完整代码。-->

for (let j = this.requestVehicle.startDateTime.getDate(); j < this.requestVehicle.endDateTime.getDate(); j++) {
  const newTime = new Date(time.getTime() + 24 * 3600 * 1000);
  time = newTime;

  const date = this.renderer.createElement('div');
  const dateIcon = this.renderer.createElement('mat-icon');
  this.renderer.appendChild(dateIcon, this.renderer.createText('today'));
  this.renderer.addClass(dateIcon, 'mat-icon');
  this.renderer.addClass(dateIcon, 'material-icons');
  this.renderer.appendChild(date, dateIcon);
  this.renderer.appendChild(date, this.renderer.createText(newTime.getDate() + '/' + newTime.getMonth() + '/' + newTime.getFullYear()));
  this.renderer.appendChild(this.d7.nativeElement, date);

  for (let i = 0; i < 24; i++) {
    const b = this.renderer.createElement('div');
    const icon = this.renderer.createElement('mat-icon');
    if (i < 7 || i > 18) {
      this.renderer.appendChild(icon, this.renderer.createText('brightness_3'));
    } else {
      this.renderer.appendChild(icon, this.renderer.createText('wb_sunny'));
    }
    let text;
    if (i >= 10) {
      text = ' ' + i;
    } else {
      text = '0' + i;
    }
    this.renderer.appendChild(b, icon);
    this.renderer.addClass(icon, 'mat-icon');
    this.renderer.addClass(icon, 'material-icons');
    this.renderer.appendChild(b, this.renderer.createText(text + ':00'));
    this.renderer.appendChild(this.d3.nativeElement, b);
  }
}