带有 Web 组件的 Dart 库布局答案

【问题标题】：Dart library layout with Web Component带有 Web 组件的 Dart 库布局
【发布时间】：2013-04-06 14:49:17
【问题描述】：

在需要构建一个使用自定义 Web 组件的库之前，我的程序运行良好。我不明白 Dart 在抱怨什么。它给出了一个警告，说它“无法解析 my_library”，这会导致错误“没有这种类型的 WebComponent”。我的尝试基于this。这是我的代码：

myapp.dart：

library my_library;

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

part 'fancyoption.dart';

void main() {
  // Enable this to use Shadow DOM in the browser.
  //useShadowDom = true;
}

myapp.html:

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="myapp.css">
    <link rel="components" href="fancyoption.html">
  </head>
  <body>
    <h3>Type a color name into a fancy option textbox, push the button and 
    see what happens!</h3>

    <div is="x-fancy-option" id="fancy-option1"></div>
    <div is="x-fancy-option" id="fancy-option2"></div>
    <div is="x-fancy-option" id="fancy-option3"></div>

    <script type="application/dart" src="myapp.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

fancyoption.dart（在同一个 web/out 目录中）：

part of my_library;

class FancyOptionComponent extends WebComponent {
  ButtonElement _button;
  TextInputElement _textInput;

  FancyOptionComponent() {
  }

  void inserted() {
    _button = this._root.query('.fancy-option-button');
    _textInput = this._root.query('.fancy-option-text');

    // make the background color of this web component the specified color
    final changeColorFunc = (e) => this.style.backgroundColor = _textInput.value;
    _button.onClick.listen(changeColorFunc);
  }
}

fancyoption.html：

<!DOCTYPE html>

<html>
  <body>
    <element name="x-fancy-option" constructor="FancyOptionComponent" extends="div">
      <template>
        <div>
          <button class='fancy-option-button'>Click me!</button>
          <input class='fancy-option-text' type='text'>
        </div>
      </template>
      <script type="application/dart" src="fancyoption.dart"></script>
    </element>
  </body>
</html>

【问题讨论】：

我浏览了 web/out 文件夹中生成的 Dart 代码，并注意到生成的 fancyoption.dart 文件将自己声明为库。我回到我的非生成代码，将 fancyoption.dart 设为自己的库并从 myapp.dart 导入它。这使程序可以正常运行。不过，这是正确的吗？每个 Web 组件都应该是自己的库？
是的，没错。 Web 组件是一个独立的、可重用的组件，因此 fancyoption.dart 不应该是 part of 主应用程序。
我也有同样的问题。将 main.dart 声明为 mylib 的一部分。但是 web/out/main.dart 声明 'library mylib;'编译器抱怨它应该是“mylib 的一部分”；然后是一堆错误。

标签： dart dart-webui

【解决方案1】：

正确答案已发布在评论中 - 将 Chris Buckett 的回复重新发布为答案，以供未来读者使用。

“Web 组件是一个独立的、可重用的组件，因此 fancyoption.dart 不应成为主应用程序的一部分。”

【讨论】：