Question

如果我直接在HTML中插入html代码，显然会注明css并正确显示元素。

但是，如果我尝试在javascript中以dinamically方式创建元素并插入它，则css类将无法被识别。

例如，我尝试过：

var el = document.createElement("div").setAttribute("class","some_class");

(...).appendChild(el).

并且el不遵守some_class

设置的css规则

我能够做到这一点的唯一方法是直接更改javascript中的元素属性：

var el = document.createElement("div").style.width = "20px"; //this works

(...).appendChild(el).

元素的样式正确。不幸的是，我想去班级名称/ ids。

那么，关于如何做到这一点的任何想法？如何通过angular2编译后创建的 _ngcontent-vkl-6 标记在javascript中绑定新创建的元素？

Answer 1

使用Renderer或Renderer2（如果使用角度4 +）：

constructor(private renderer: Renderer) {}

createElement() {

 const element = this.renderer.createElement(theElementToAppendTo, 'div');

  this.renderer.setElementAttribute(element, 'class', 'some_class');
}

你这样做的方式对角度来说是不安全的，DOM操作只能通过Renderer或其他绑定来完成，例如HostBinding。

此示例使用Renderer：

https://angular.io/docs/js/latest/api/core/index/Renderer-class.html

但如果您使用的是角度4+，则应使用具有不同api的Renderer2：

https://angular.io/docs/ts/latest/api/core/index/Renderer2-class.html

我希望这会有所帮助。

如何将css类绑定到angular2元素，进行后编译？

1 个答案: