Question

我目前能够将有角度的材料卡动态添加到网页中。我的问题是，当我创建卡片时，它不会应用我想要的类样式。我发现如果在案例18中添加_ngcontent-c（子代号），它将为卡片提供所需的样式。问题是生成了18，并且将根据我在哪里拥有组件或可能以其他方式更改。当前要添加的卡，我正在使用如下代码：

  addFilm() {
    this.d1.nativeElement.insertAdjacentHTML('beforeend',
      '<mat-card _ngcontent-c18 class="film mat-card" style="margin:2px; left:' + this.vehicleText + 'px; width:'
      + this.vehicleDuration + 'px;"></mat-card>');
  }

我的问题是我如何添加卡以免于使用nativeElement.insertAdjacentHTML（）或如何添加具有inserAdjacentHTML的卡，但始终获得正确的_ngcontent-c？ strong>

prototype function

Answer 1

我使用角度渲染器2 实现了同样的效果。使用角度渲染器时，生成html时不必考虑_ngcontent-c angular为您设置它们。

const matCard = this.renderer.createElement('mat-card');

this.renderer.addClass(matCard, 'film');
this.renderer.addClass(matCard, 'mat-card');

this.renderer.setStyle(matCard, 'margin', '2px');
this.renderer.setStyle(matCard, 'left', this.vehicleText + 'px');
this.renderer.setStyle(matCard, 'width', this.vehicleDuration + 'px');

this.renderer.appendChild(this.d1.nativeElement, matCard);

如何动态生成和添加具有正确_ngcontent-c编号的角形材料卡？

1 个答案: