将参数/输入数据传递到DART中的自定义元素 [英] passing parameter/input data to custom elements in DART

问题描述

我创建了一个自定义元素，并且要向其发送数据/参数：

我的元素代码是：

class SaveBtn extends HtmlElement {
static final tag ='save-button';
factory SaveBtn（）=> new Element.tag（tag）;

SaveBtn.created（）：super.created（）{
//创建一个影子根
var shadow = this.createShadowRoot（）;
//创建一个标准元素并设置它的属性。
var btn = new ButtonElement（）;
...
btn.text = this.getAttribute（'data-name'）;


shadow.nodes.add（btn）;

元素launchElement（）{
return（shadow）;
}

}
}


html文件中的代码工作完美：

 < save-button data-name ='save订单'>< / save-button> 
  

但是如果我想使用下面的代码，我应该在自定义元素代码中调整什么？

  new SaveBtn（'save orders'）
  

解决方案

name 是一个可选参数。当你传递一个值时，它用于按钮的 text 属性。

我将它只传递给一个字段（元素类中的），并将其设置为附加中的按钮。

当您使用 data-xxx 属性可以使用数据集 getter。

我也更改了其他代码。我认为附加是访问属性的更好的地方，因为元素已经正确升级。

  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（）{
 //创建一个影子根
 var shadow = this.createShadowRoot（）; 
 //创建一个标准元素并设置它的属性。 
 innerButton = new ButtonElement（）; 
 shadow.nodes.add（innerButton）; 
} 
 
字符串名称; 
 
 @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）
字符串名称，宽度; 
 
 @override 
 void attached（）{
 super.attached（）; 
 innerButton.text = name！= null？ name：this.dataset ['name'] 
 ..style.width = width; 
} 
  

将项目调用为：

  var btn = new SaveBtn（）.. name ='save'.. width ='100％'; 
  




I created a custom element, and want to send data / parameters to it:

my element code is:

   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); 
    }

  }  
 }

The below code in the html file worked perfectly:

<save-button data-name='save orders'></save-button>

but what if I want to use the below code, what shall I adjust in my custom element code?

new SaveBtn('save orders')

解决方案

name is an optional argument. When you pass a value it is used for the text attribute of the button.
I pass it just to a field (name) in the elements class and set it to the the button in attached.
When you use data-xxx attributes you can use the dataset getter.
I also changed the other code a bit. I think attached is a better place to access attributes because then the element is already upgraded properly.

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;

Below a solution proved to work.

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;
  }

call the item as:

var btn = new SaveBtn()..name='save'..width='100%';

这篇关于将参数/输入数据传递到DART中的自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！