Question

通过我的飞镖旅程，我在装载组件方面偶然发现了一个“拦截器”。

将我的组件定义为：

<!DOCTYPE html>
<element name="x-foo" constructor="FooComponent" extends="button">
  <template>
    <button type="button" class="btn {{classes}}"> {{text}} </button>
   </template>

   <script type="application/dart">

   import 'package:web_ui/web_ui.dart';

   String classes = '';
   String text = '';

   class FooComponent extends WebComponent {

   }
   </script>
</element>

并引用该组件如下：

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>example</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- '../web/foo.html' or '../web/out/foo.html.dart' -->
    <link rel="components" href='foo.html'>
  </head>
  <body>
    <h1>example</h1>

    <p>Hello world from Dart!</p>

    <x-foo></x-foo>

    <script type="application/dart">void main() { }</script>
    <script type="text/javascript" src="dart.js"></script>
  </body>
</html>

我的构建脚本没有创建html文件（输出文件夹：foo.html.dart），我不确定我要引用哪个文件。

手册也没有足够的声明来解决我的问题： http://www.dartlang.org/articles/dart-web-components/spec.html#loading-components

引用组件的定义（foo.html）或它生成的输出（foo.html.dart）不起作用。我还通过检查双重检查了两个文件的路径，只是用铬来下载这两个文件。

我的结论性问题：此引用（链接元素href）是否指向内部智能或运行时的“物理”可用文件？如果其次，哪一个（生成（html / dart）或源）？

为了避免误解，我添加了一份我的回购清单：

foo
  packages
  examples
    assets
    dart.js
    example.html
  web
    out
      foo.html.dart
    foo.html
  build.dart

Answer 1

组件文件（foo.html）缺少<html><body>...</body></html>标记：

<!DOCTYPE html>
<html>
<body>
<element name="x-foo" constructor="FooComponent" extends="button">
...
</element>
</html>
</body>

两个文件（examples.html和foo.html）必须位于同一个基本目录中：

web
  examples.html
  foo.html
  ...

然后，examples.html需要用作build.dart内的参数：

build(new Options().arguments, ['web/example.html']);

最后，foo.html（即web/foo.html）必须是要链接的人：

<link rel="components" href='foo.html'>

Answer 2

在主HTML文件中使用它的方式是正确的。您引用foo.html，因为需要使用dwc编译引用HTML文档。 dwc将获取主HTML文件并对其进行编译以及它包含的所有组件。该组件已完全编译为Dart，并且它们.html文件不再被使用。

如果您尝试编辑example.html以包含您的组件，则需要编译example.html，而不是foo.html。您仍然会生成foo.html.dart，还会生成example.html.dart和一个用于加载所有内容的引导脚本。

在Dart M2中加载Web组件（web_ui）

2 个答案: