我有一个包含标签、选择和删除按钮元素的电子邮件组件(email-tag.html)。
email-tag.html 组件托管在其父 email-view-tag.html 中。 email-view-tag 包含一个 add-email-button ，每次单击时将 email-tag 元素添加到 DOM。
当单击删除按钮时，我需要帮助删除添加的电子邮件标签组件。它是包含应该删除的删除按钮的组件。
这两个组件如下所示:
电子邮件-tag.html
<!DOCTYPE html>
<polymer-element name='email-tag'>
<template>
<style>
.main-flex-container
{
display:flex;
flex-flow:row wrap;
align-content:flex-start;
}
.col
{
display:flex;
flex-flow:column;
align-content:flex-start;
flex-grow:1;
}
</style>
<div id='email' class='main-flex-container'>
<section id='col1' class='col'>
<input id=emailTxt
type='text'
list='_emails'
value='{{webContact.homeEmail}}'>
<datalist id='_emails'>
<template repeat='{{email in emails}}'>
<option value='{{email}}'>{{email}}</option>
</template>
</datalist>
</section>
<section id='col2' class='col'>
<button id='delete-email-btn' type='button' on-click='{{deletePhone}}'>Delete</button>
</section>
</div>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart' show CustomTag, PolymerElement;
import 'dart:html' show Event, Node;
@CustomTag( 'email-tag' )
class EmailElement extends PolymerElement
{
//@observable
EmailElement.created() : super.created();
List<String> emails = [ '', 'Home', 'Personal', 'Private', 'Work', ];
void deletePhone( Event e, var detail, Node target)
{
//shadowRoot.querySelector('#new-phone' ).remove();
//print( 'Current row deleted' );
}
}
</script>
</polymer-element>
电子邮件-view-tag.html
<!DOCTYPE html>
<link rel="import" href="email-tag.html">
<polymer-element name='email-view-tag'>
<template>
<style>
.main-flex-container
{
display:flex;
flex-flow:row wrap;
align-content:flex-start;
}
.col
{
display:flex;
flex-flow:column;
align-content:flex-start;
flex-grow:1;
}
</style>
<div id='email-view' class='main-flex-container'>
<section id='row0' >
<button id='add-email-btn' type='button' on-click='{{addPhone}}'>Add Phone</button>
</section >
<section id='rows' class='col'>
<!-- <epimss-phone-header-tag id='col1' class='col'></epimss-phone-header-tag> -->
</section>
</div>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart' show CustomTag, PolymerElement;
import 'dart:html' show Event, Node, Element;
@CustomTag( 'email-view-tag' )
class EmailViewElement extends PolymerElement
{
//@observable
EmailViewElement.created() : super.created();
void addPhone( Event e, var detail, Node target )
{
$[ 'rows' ].children.add( new Element.tag( 'email-tag' ) );
}
@override
void attached() {
super.attached();
$[ 'add-email-btn' ].click();
}
}
</script>
</polymer-element>
应用程序执行正常，单击添加按钮确实添加了电子邮件组件。删除按钮不起作用 - 我在这里寻求帮助。
谢谢
最佳答案
子组件 <email-tag>不应该是在删除自己的业务。相反，它应该将该责任委托(delegate)给父组件email-view-tag。 ，通过调度自定义事件。
这是从 deletePhone 调度自定义事件的代码:
void deletePhone( Event e, var detail, Node target){
dispatchEvent(new CustomEvent('notneeded'));
}
然后，在父级中，
<custom-view> ，更改您的代码以添加 <email-tag>像这样:void addPhone( Event e, var detail, Node target ) {
$['rows'].children.add( new Element.tag('email-tag'));
$['rows'].on["notneeded"].listen((Event e) {
(e.target as Element).remove();
});
}
另外，我会更改
deletePhone 的名称，因为该方法不再删除记录，而只是通知父级不需要它。称之为“不需要”或类似的东西。
关于dart - 如何使用子组件本身的删除按钮删除子组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20406328/