首页 文章

飞镖包中的聚合物元素

提问于
浏览
2

我有一个dart包,其中包含三个聚合物元素的扩展:tp-element-a,tp-element-b和tp-element-c . 对于这些元素中的每一个,都有一个html文件,其中包含元素的标记和代码的dart文件 . tp-element-c包含对tp-element-a和tp-element-b的引用 . 包结构如下所示:

testpolymer
pubspec.yaml
- packages
- asset
    tp-element-a.html
    tp-element-b.html
    tp-element-c.html
- lib
    testpolymer.dart
    tp-element-a.dart
    tp-element-b.dart
    tp-element-c.dart
- web
    index.html

聚合物元素的定义非常简单:

TP-元件a.html

<polymer-element name="tp-element-a">
<template>
<h1>Hello Element A</h1>
</template>
<script type="application/dart" src="../lib/tp-element-a.dart"></script>
</polymer-element>

TP-元件a.dart

part of testpolymer;

@CustomTag("tp-element-a")
class TpElementA extends PolymerElement {
  TpElementA.created() : super.created() {}
}

我跳过了tp-element-b和tp-element-c的定义 . 它们很相似 . 唯一的区别是tp-element-c在其模板标记中使用tp-element-a和tp-element-b .

文件testpolymer.dart包含库testpolymer的定义:

library testpolymer;

import "package:polymer/polymer.dart";

part "tp-element-a.dart";
part "tp-element-b.dart";
part "tp-element-c.dart";

在yaml文件中,我对聚合物封装的依赖性进行了decalre并添加了聚合物变换器:

name: testpolymer
description: A pub package
dependencies:
  polymer: any
transformers:
- polymer:
    entry_points: web/index.html

最后,index.html只包含指向tp-element-c.html的链接并使用此元素:

<html>
  <head>
    <link rel="import" href="../asset/tp-element-c.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
    <div id="sample_container_id">
      <tp-element-c></tp-element-c>
    </div>
  </body>
</html>

到现在为止还挺好 . 但是,当我运行pub构建时,我会收到错误,这可能都是由于在库中组织dart文件引起的:

packages/testpolymer/tp-element-a.dart:1:1:
Directive not allowed here.
part of testpolymer;

packages/testpolymer/tp-element-a.dart:4:26:
A class can't extend a malformed type.
Try correcting the malformed type annotation or removing the 'extends' clause.
class TpElementA extends PolymerElement {

packages/testpolymer/tp-element-a.dart:3:2:
Cannot resolve 'CustomTag'.
@CustomTag("tp-element-a")

那么如何在库中包含聚合物元素的代码呢?

如果我不将聚合物代码组织为库,我在tp-element-c.dart中会出现另一个错误,即导入(如果没有使用库)tp-element-a.dart和tp-element-b .dart直接:

The imported libraries 'tp-element-a.dart' and 'tp-element-b.dart' should not have the same name ''

我该如何解决这个难题?

1 回答

  • 2

    如果每个dart文件中没有唯一的 library uniquename; 定义,则会收到最后一条错误消息 . 在你的情况下,名称可以是:tp-element-a,tp-element-b等 .

相关问题