[使用JavaScript Angular 7创建HTML时无法识别CSS类

Question

我正在尝试使用Javascript向现有的HTML元素中添加新元素，但是我添加的类无效。在ngOnInit（）

中调用此函数

renderHand ( cards:Array<string> )
{

  var hand:HTMLElement = document.getElementById ( "hand-list-1" );

  for ( var card of cards )
  {
    // Create card
    var imgElement = document.createElement ( "img" );
    // here
    imgElement.src = `assets/cards/${card}.png`;
    imgElement.classlist.add ( "card-img-style" );

    var liElement = document.createElement ( "li" );
    // and here
    liElement.classList.add ( "card-in-hand" );
    liElement.style.width = "75px";
    liElement.style.height = "150px";

    liElement.appendChild ( imgElement );
    hand.appendChild ( liElement );
  }
}

当我使用chrome的检查器时，类会如您期望的那样显示在元素属性下，但是不会填充实际的CSS类值。当我尝试将其直接嵌入为html时，它按预期工作。

为什么这不适用于Angular？

Answer 1

找到答案。 Angular在初始渲染时生成的元素具有_ngcontent-cX属性。 X是一个数字。它还更改所有css类，以便它们仅应用于具有此属性的元素。我假设c代表组件，这是为了防止CSS之间组件之间的冲突。有用，但如果您尝试动态生成html，也很烦人。

要解决此问题，您可以设置：

@Component({
  selector: 'my-comp',
  encapsulation: ViewEncapsulation.None,
  ...
});

这删除了该属性，使您可以轻松地生成带有样式的html。

从this stackoverflow answer获得答案