Question

我尝试从polymer-element创建自定义元素，但我无法使@CustomTag工作。我的dart文件（my_element.dart）如下所示：

@HtmlImport('my_element.html')
library projects.projectFolder.layout;

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('my-element')
class MyElement extends PolymerElement {

  @published String caption;
  MyElement.created() : super.created();
}

我的html文件（my_element.html）如下所示：

<link rel="import" href="../../../../packages/polymer/polymer.html">

<polymer-element name="my-element"> 
  <template>
    <link rel="stylesheet" href="my_element.css">

    <core-toolbar>
      <h1>{{ caption }}</h1>
    </core-toolbar>

  </template>
  <script type="application/dart" src="../my_element.dart"></script>
</polymer-element>

问题是Chrome控制台继续打印以下错误：

No elements registered in a while, but still waiting on 1 elements to be registered. Check that you have a class with an @CustomTag annotation for each of the following tags: 'my-element'.

很奇怪，因为我已经宣布了自定义标签。它似乎在.dart文件到达.html时无法读取。从另一个父.html文件调用.html文件。我认为调用文件的顺序可能是问题所在，但如果在运行之前编译Dart，它就不应该关心。
我尝试了几种解决方案，但没有一种方法有效。唯一有效的工作是非常脏，它直接从主my_element.dart文件导入my_app.dart文件。我想不应该这样做，因为这意味着要导入同一主my_element.dart中的每个my_app.dart文件。

编辑（添加index.html，pubspec.yml）
我的index.html文件如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>My app</title>
</head>
<body unresolved fullbleed>
  <my-app></my-app>

  <script type="application/dart">
    import 'package:polymer/polymer.dart';
    import 'package:project/my_app.dart';

    main() => initPolymer();

  </script>
</body>
</html>

my_app是另一个自定义元素，它是所有其他元素的主要元素。换句话说，它就像应用程序的主控制器。此元素还有一个.dart和.html文件，它会调用其他元素，例如my-element。
如您所见，我的main()函数非常简单，因为它只是init（参见index.html）。

我的pubspec.yml如下：

name: project
version: 0.0.1
description: Some project.
author: Tomas
homepage: https://github.com/*******

environment:
  sdk: '>=1.10.0 <2.0.0'

dependencies:
  polymer: '^0.16.0'
  core_elements: '^0.7.1'
  paper_elements: '^0.7.1'
  route_hierarchical: "^0.6.1"

transformers:
- polymer:
    entry_points: web/index.html
- $dart2js:
    $include: "**/*.polymer.bootstrap.dart"

我的目录看起来像这样（我只展示它的一小部分，我希望这是重要的一个）：

.
├── README.md
├── build
│   └── web
│       ├── index.html
│       ├── index.html.polymer.bootstrap.dart.js
│       └── packages
├── lib
│   ├── my_app.dart
│   └── src
│       ├── elements
│       ├── layout
│       │   ├── my_element.css
│       │   ├── my_element.dart
│       │   └── my_element.html
│       ├── my_app.css
│       ├── my_app.html
│       └── modules
│           └── module.dart
│       ├── my_app.css
├── pubspec.lock
├── pubspec.yaml
└── web
│   ├── index.html
│   └── packages -> ../packages
│       ├── my_app.html
│       └── modules
│           └── module.dart

我希望这个编辑不会比它应该更多地混淆。我只是想知道哪个是Dart应用程序的正确文件夹结构和导入形式。

简而言之：在使用dart编写大型应用程序时，树应该怎么样？我应该在哪里进行导入？我查看了所有可能的文档，包括一些教程，但是所有这些文档都讨论了非常简单的示例，其中代码的大部分位于web文件夹中，我不想要。

编辑（汇总和改写，添加my_app.html和my_app.dart）

用更少的话来说：

我有my_element.html和my_element.dart定义的自定义元素（在此答案中定义），我想仅使用html将其导入另一个my_app元素。即不是在my_element.dart中导入my_app.dart，而是仅使用my_element.html中的链接标记导入my_app.html：

<link rel="import" href="../../../packages/polymer/polymer.html">
<link rel="import" href="layout/my_element.html">

<polymer-element name="my-app">
  <template>

    <core-scaffold id="scaffold">

      <my-element tool flex></my-element>

      <main fit></main>

    </core-scaffold>

  </template>
  <script type="application/dart" src="../my_app.dart"></script>
</polymer-element>

my_app.dart：

@HtmlImport('src/my_app.html')

import 'package:polymer/polymer.dart';
import 'package:core_elements/core_scaffold.dart';

@CustomTag('my-app')
class MyApp extends PolymerElement {

  MyApp.created() : super.created();
}

<script type="application/dart" src="../my_element.dart"></script>是否足以告诉编译器加载该dart文件以通过遵循html import定义的传递依赖来注册元素标记？

Answer 1

您需要在my_app.dart中导入所有自定义组件Dart类。通常，您需要创建一个要导入的Dart文件，这会导出每个条目，以便my_app.dart保持干净。

HTML导入：未注册CustomTag

1 个答案: