我创建了一个自定义元素,并希望向其发送数据/参数:
我的元素代码是:
class SaveBtn extends HtmlElement {
static final tag = 'save-button';
factory SaveBtn()=>new Element.tag(tag);
SaveBtn.created() : super.created() {
// Create a Shadow Root
var shadow = this.createShadowRoot();
// Create a standard element and set it's attributes.
var btn = new ButtonElement();
...
btn.text= this.getAttribute('data-name');
shadow.nodes.add(btn);
Element launchElement(){
return (shadow);
}
}
}
html文件中的以下代码运行完美:
<save-button data-name='save orders'></save-button>
但是,如果我想使用以下代码,该如何在自定义元素代码中进行调整?
new SaveBtn('save orders')
最佳答案
name
是可选参数。传递值时,该值将用于按钮的text
属性。
我仅将其传递到elements类中的字段(name
),并将其设置为attached
中的按钮。
使用data-xxx
属性时,可以使用dataset
getter。
我还更改了其他代码。我认为attached
是访问属性的更好位置,因为那时该元素已经正确升级。
class SaveBtn extends HtmlElement {
static final tag = 'save-button';
factory SaveBtn([String name]) => (new Element.tag(tag) as SaveBtn)..name = name;
ButtonElement innerButton;
ShadowRoot shadow;
SaveBtn.created() : super.created() {
// Create a Shadow Root
var shadow = this.createShadowRoot();
// Create a standard element and set it's attributes.
innerButton = new ButtonElement();
shadow.nodes.add(innerButton);
}
String name;
@override
void attached() {
super.attached();
innerButton.text = name != null ? name : this.dataset['name'];
}
}
SaveBtn({String name, String width}) => (new Element.tag(tag) as SaveBtn)
..name = name
..style.width=width;
下面的解决方案被证明是可行的。
factory SaveBtn() => new Element.tag(tag)
String name, width;
@override
void attached() {
super.attached();
innerButton.text = name != null ? name : this.dataset['name']
..style.width=width;
}
将该项目称为:
var btn = new SaveBtn()..name='save'..width='100%';
关于dart - 将参数/输入数据传递到DART中的自定义元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26324758/