Question

我想在Dart中为我做一些非常简单的事情。我从模板创建了web-ui应用程序，并希望将xclick-counter web组件从根文件夹中移出。这是我的项目在Dart编辑器中的样子：

NewComposite (folder)
   pubspec.lock (file)
   pubspec.yaml (file)
   web (folder)
      lib(folder)
         comp1.dart (file)
         Comp1.html (file)
         mylib.dart (file)
      newcomposite.css (file)
      newcomposite.dart (file)
      newcomposite.html (file)
      xclickcounter.dart (file)
      xclickcounter.html (file)

Lib文件夹包含库，它只是重命名为Comp1的ClickCounter组件的副本。问题是我应该如何引用Comp1在newcomposite.html中使用它？。到目前为止，我在文件夹代码中得到的错误数量，我甚至不应该改变。请参阅以下确切代码：

来源的 mylib.dart：

library mylib;

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

part 'comp1.dart';

comp1.dart：

part of mylib;

class Comp1 extends WebComponent {
  @observable
  int count = 0;

  void increment() {
    count++;
  }
}

Comp1.html

<html>
  <body>
    <element name="x-comp1" constructor="Comp1" extends="div">
      <template>
        <div>
          <button on-click="increment()">Click me</button><br />
          <span>(click count: {{count}})</span>
        </div>
      </template>
      <script type="application/dart" src="comp1.dart"></script>
    </element>
  </body>
</html>

newcomposite.html（应该引用）

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="newcomposite.css">

    <!-- import the comp1-->
    <link rel="import" href="lib/comp1.html">
  </head>
  <body>
    <h1>NewComposite</h1>

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

    <div id="sample_container_id">
      <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div>
    </div>

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

Answer 1

如果将lib目录移动到项目的根目录中，它应该会更好：

NewComposite (folder)
   pubspec.lock (file)
   pubspec.yaml (file)
   lib(folder)
      comp1.dart (file)
      comp1.html (file)
      mylib.dart (file)
   web (folder)
      newcomposite.css (file)
      newcomposite.dart (file)
      newcomposite.html (file)
      xclickcounter.dart (file)
      xclickcounter.html (file)

假设您已在pubspec.yaml中将项目命名为“newcomposite”，则可以通过引用自己的项目库将组件导入newcomposite.html：

<html>
  <head>
    <meta charset="utf-8">
    <title>Sample app</title>
    <link rel="stylesheet" href="newcomposite.css">

    <!-- import the comp1-->
    <link rel="import" href="package:newcomposite/comp1.html">
  </head>
  <body>
    <h1>NewComposite</h1>

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

    <div id="sample_container_id">
      <div is="x-comp1" id="click_counter" count="{{startingCount}}"></div>
    </div>

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

如何将WebComponent移动到文件夹然后使用它？

1 个答案: