dart - Dart 封装中的 polymer 元件

标签 dart dart-polymer polymer

我有一个 dart 包,其中包含 polymer 元素的三个扩展: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

polymer 元素的定义非常简单:

tp-element-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-element-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 文件中,我声明了对 polymer 包的依赖关系并添加了 polymer 变压器:

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")

那么如何才能将 polymer 元素的代码包含在库中呢?

如果我不将 polymer 代码组织为库,则会在 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 ''

如何解决这个难题?

最佳答案

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

关于dart - Dart 封装中的 polymer 元件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22899484/

相关文章:

flutter - 带有文本字段的Flutter floatActionButton不在键盘上方。需要像facebook messanger这样的东西

flutter - 如何在 Dart 中生成类图?

dart - 如何让霓虹动画在 Polymer Dart 1.0 中工作

dart - 如何从 Polymer Dart 触发自定义事件?

javascript - 如何在Polymer 1.0中调用元素的自定义方法?

javascript - 页面完全加载时 Dart 中的回调

dart - 如何在 Dart 的一个接口(interface)中结合传统和基于 Future 的 API?

dart - 如何在 Dart 中创建可重用的 JavaScript 模式

dart - 如何根据对象属性条件在 DART Polymer 模板中插入元素?

javascript - Polymer 2.0 边缘问题