Question

我正在尝试将后端发送的css样式包含到我的组件模板中。

我的服务器响应如下：

serverResponse: {
   content: '<div class="myClass classX">hello world</div>',
   styles: '.myClass{color:red} .classX{...}  ....';
}

（我知道从后端获取css样式不是一个好主意，但不幸的是我无法改变它; - ）

我的组件模板如下所示：

<style>
   <!-- serverResponse.styles should be in here. But how? -->
</style>
<div [innerHTML]="serverResponse.content">
   <!-- Binding to innerHTML works! -->
</div>

我已经在我的组件中将“封装”设置为“ViewEncapsulation.None”，以便使用<style>元素启用样式。

我已经尝试过的是这样的事情：

<style [textContent]="serverResponse.styles">

但是绑定到textContent不起作用......

我真的很感谢你的帮助！

Answer 1

首先，您应该使用服务器响应中的样式更新您的类属性。

然后使用样式绑定将样式类属性绑定到模板。

Answer 2

我犹豫了一下，因为我不认为在页面上添加单独的css规则是一种很好的做法，但我会尝试回答这个问题。

$(function() {

  function handleElementResponse( html, css ) {
    console.log( $("style") );
    
    $("style").append( css );
    $("#mydiv").append( html );
  };
  
  handleElementResponse(
    "<div class=\"myClass\">hello world</div>",
    ".myClass{color:red}"
    );
    handleElementResponse(
    "<div class=\"myClass2\">hello world 2</div>",
    ".myClass2{color:blue}"
    );
});

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style></style>
</head>

<body>
  <div id="mydiv">
     <span class="someClass">Hello</span>
  </div>
</body>
</html>

我的拙见是，你应该：

使用“样式”属性
如果可能，请事先定义样式，然后将这些类应用于html元素。

希望这有帮助

包括后端发送到组件的css样式

2 个答案: