Question

我创建了一个WebComponent，我为它创建了一个构造函数。运行时，似乎没有调用此构造函数，尽管其余组件可以工作，但它们必须在我的自定义构造函数之外创建。这是我正在谈论的一个例子。

<element name="x-navigation" constructor="Navigation" extends="div">
    <template>
        <div>{{items}}</div>
    </template>
    <script type="application/dart">
        import 'package:web_ui/web_ui.dart';

        class Navigation extends WebComponent {
          List<String> items = new List<String>();
          Navigation() {
              items.add("Hello");
          }
        }
    </script>
<element>

如果我包含这个组件，输出将是一个空列表，就像我创建的构造函数没有被调用一样。至少应该有“Hello”字符串输出，但事实并非如此。是这样创建的构造函数被忽略了，还是我错过了什么？

Answer 1

最新版本的Web UI现在调用构造函数，并且还有created生命周期方法可供您使用。

以下代码添加两个hello：

<element name="x-navigation" constructor="Navigation" extends="div">
  <template>
    <div>{{items}}</div>
  </template>

  <script type="application/dart">
    import 'package:web_ui/web_ui.dart';

    class Navigation extends WebComponent {
      List<String> items = new List<String>();

      Navigation() {
        items.add("Hello first");
      }

      created() {
        items.add("Hello second");
      }
    }
  </script>
<element>

我建议阅读有关生命周期方法的文章：http://www.dartlang.org/articles/dart-web-components/spec.html#lifecycle-methods

生命周期方法

created（） - 在创建组件后稍微调用。

inserted（） - 每当将组件添加到DOM时调用。

attributeChanged（） - 只要组件中的属性发生变化，就会调用。

removed（） - 每当从DOM中删除组件时调用

Answer 2

在课堂上添加以下方法：

created() {
   items.add("Hello");
 }

如何让WebComponent类调用我的自定义构造函数？

2 个答案:

生命周期方法