WebComponent
: created()
, inserted()
및 removed()
의 세 가지 수명주기 메서드를 재정의 한 후 처음 두 개는 일관되게 호출되지만 removed()
은 호출되지 않습니다. removed()
이 호출되도록해야 할 특별한 것이 있습니까? 또는 단순히 호출되지 않았습니까?WebComponent.removed()가 이제까지 호출 되었습니까?
1
A
답변
5
removed()
메서드는 사용자 정의 요소가 DOM에서 제거 될 때 호출됩니다. 다음은 created()
, inserted()
및 removed()
주기주기 이벤트의 사용을 보여주는 작은 프로그램입니다. <my-element>
,
<!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>
이 파일 가져 오기 및 사용자 정의 요소를 표시합니다
이처럼 보이는index.html
파일 다트 웹 응용 프로그램을 만듭니다.
는 <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>
을 그리고 라이프 사이클 메소드를 호출하기 보여줍니다 첨부 다트 파일 정의 : 당신이 index.html
을 실행하면
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');
}
}
, 당신은 단락을 볼 것이다 거기에 몇 가지 텍스트가 있습니다. created()
및 inserted()
라이프 사이클 메소드가 호출되고 'created'및 'inserted'메시지가 콘솔에 인쇄됩니다. 사용자 지정 요소가 포함 된 div를 클릭하면 요소가 제거되고 removed()
수명주기 메서드가 호출되고 콘솔에서 '제거됨'이 인쇄됩니다.
희망이 도움이됩니다.
도움을 주셔서 감사합니다. 불행히도 나는 내 질문에 정확하지 않았습니다. 명시 적으로 구성 요소를 제거하지는 않지만 조건부 템플릿을 사용하여 구성 요소를 인스턴스화합니다. 나는 아직 폴리머 라이브러리를 사용하지 않는다. 내가 어떻게 질문을 던 졌는지 생각해 볼 때 나는 당신의 대답을 올바른 것으로 표기해야합니다. 최대한 빨리 폴리머 라이브러리로 이전 할 예정이며,이 마이그레이션이 현재의 문제를 해결할 수 있습니다. 시간 내 주셔서 다시 한 번 감사드립니다! – Y2i