1

在覆盖WebComponent: created()、inserted()和三个生命周期方法后removed()，我可以看到前两个被一致调用但从removed()未被调用。有什么特别的事情需要做才能removed()被称为？或者它根本就没有被调用？

4

1 回答 1

5

removed()当从 DOM 中删除自定义元素时调用该方法。这是一个小程序，演示了created()、inserted()和removed()生命周期事件的使用。

index.html使用如下所示的文件创建一个 Dart Web 应用程序：

<!DOCTYPE html>

<html>
  <head>
    <title>index</title>
    <link rel="import" href="my_element.html">
    <script src="packages/polymer/boot.js"></script>
  </head>

  <body>
    <div id='container'><my-element></my-element></div>
    <script type="application/dart">
      import 'dart:html';
      void main() {
        query('#container').onClick.listen((event) {
          event.target.remove();
        });
      }
    </script>
  </body>
</html>

此文件导入并显示自定义元素<my-element>.

定义以下定义的文件<my-element>：

<!DOCTYPE html>

<html>
  <body>
    <polymer-element name="my-element">
      <template>
        <p>The name is {{person.name}}</p>
      </template>

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

并定义随附的 Dart 文件来演示被调用的生命周期方法：

import 'package:polymer/polymer.dart';

class Person extends Object with ObservableMixin {
  @observable String name;
  Person(this.name);
}

@CustomTag("my-element")
class MyElement extends PolymerElement {
  @observable Person person = new Person('Shailen');

  void created() {
    super.created();
    print('created');
  }

  void inserted() {
    print('inserted');
  }

  void removed() {
    print('removed');
  }
}

当你运行时index.html，你会看到一个包含一些文本的段落。created()调用和生命周期inserted()方法，并在控制台中打印“创建”和“插入”消息。当您单击包含自定义元素的 div 时，该元素将被删除，removed()生命周期方法被调用，并在控制台中打印“已删除”。

希望这可以帮助。

于 2013-08-27T18:19:56.047 回答