dart - 将参数/输入数据传递到DART中的自定义元素

Question

我创建了一个自定义元素，并希望向其发送数据/参数:

我的元素代码是:

   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')

Answer 1

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%';