Question

您好我正在尝试在我的聚合物中加载一个外部css文件但不起作用代码：

<polymer-element name="my-polymer-component" attributes="query">
  <template>
    <template if="{{condition}}">
    <link type="text/css" rel="stylesheet" href="my-polymer-component.css"/>
    </template>
    <template if="{{condition}}">
    <link type="text/css" rel="stylesheet" href="my-polymer-component2.css"/>
    </template>
    <section class="container">
          <div class="headerImportText">
            <span>
              hello world
            </span>
          </div>
    <section>
  <template>
  <script>
    Polymer({
    });
  </script>
</polymer-element>

我需要根据条件更改组件的UI。

Answer 1

据我所知，你不能在模板中进行声明式条件CSS加载，你必须以编程方式进行条件CSS加载。

这里有一个示例：http://plnkr.co/edit/8Oavqpbh8eJTTKLw13bL?p=preview

代码的相关部分：

<polymer-element name="my-polymer-component" attributes="condition">
  <template>
    <h1>Condition: {{condition}}</h1>
    <section class="container">
        <content> </content>
    </section>
  </template>
  <script>
      Polymer({
        domReady: function() {
          var fileref=document.createElement("link")
          fileref.setAttribute("rel", "stylesheet")
          fileref.setAttribute("type", "text/css")
          fileref.setAttribute("href", this.condition+".css")
          console.log(fileref)
          this.appendChild(fileref)
          console.log("domReady!")

        }
      });
    </script>
</polymer-element>

<h1>Here you have a sample</h1>
<my-polymer-component condition="a">
</my-polymer-component>

希望它有所帮助！

条件模板在聚合物中加载外部css

1 个答案: