Question

鉴于库指令可以是文件中唯一的指令，如何使作为库一部分的组件.dart文件也包含@HtmlImport指令？

例如，给出以下内容：

.dart

part of epimss_shared.components;

@CustomTag('blue-theme')
class BlueTheme extends PolymerElement {
  String topic = '';

  @observable String lb50 = lightBlue_50;
  @observable String lb100 = lightBlue_100;
  @observable String lb200 = lightBlue_200;
  @observable String lb700 = lightBlue_700;

  BlueTheme.created() : super.created();

  @published
  String get width => readValue(#width);
  set width(String value) => writeValue(#width, value);

  @override
  void attached() {
    super.attached();
    topic = this.dataset['topic'];
  }
}

html的

<!DOCTYPE html>
<link href='../../../../packages/core_elements/core_style.html' rel='import' >

<polymer-element name='blue-theme'>

  <template>
    <core-style id='blue-theme'>
      :host {}
      <!-- BLUE THEME -->   
      .lblue50 {
        background-color: {{lb50}};
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 10px;
        width: {{width}};
      }   

      .lblue100 {
        background-color: {{lb100}};
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 10px;
      }  

      .lblue200 {
        background-color: {{lb200}};
        border-radius: 10px;
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 4px; 
      }  

      .lblue700 {
        background-color: {{lb700}};
        border-radius: 10px;
      }
    </core-style>
  </template>

  <script type='application/dart' src='blue_theme.dart'></script>
</polymer-element>

如果我要添加..

@HtmlImport('blue_theme.html')
library epimss_shared.component.dart;

到.dart src，提示错误，指令库指令可以是页面上唯一的指令。

我认为使用新的HtmlImport我现在最终可以将.dart和.html文件放在库中，就像我单独使用.dart文件一样，但这似乎不正确。

有没有办法完成我想要做的事情？感谢

Answer 1

导入库时，变换器会为组件HTML添加由@HtmlImport(...)声明的HTML导入，因此您或组件的用户不必手动执行此操作。

另见Dart. How to use @HtmlImport on the example of Polymer?

如何使用库的@HtmlImport指令创建.dart文件

1 个答案: