Question

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

Answer 1

从DOM中删除自定义元素时，将调用removed()方法。这是一个小程序，演示了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()生命周期方法，并在控制台中打印“删除”。

希望这会有所帮助。

是否曾调用过WebComponent.removed（）？

1 个答案: