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

这是另一个在阅读已发布的答案之前与我合作的解决方案，我喜欢@Gunter的回答并会适应它。

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

  var shadow, btn;

  SaveBtn.created() : super.created() {
    shadow = this.createShadowRoot();

    btn = new ButtonElement()
        ..text="save"
        ..style.height= '20px'  
        ..style.borderBottom='1px solid #D1DBE9'; 

    btn.text = this.getAttribute('data-name');

    shadow.nodes..add(label)..add(btn);
  } 

  Element launchElement(name){ 
    btn.text= name;
    return (shadow); 
  }
}

并将元素称为：

var btn=new SaveBtn()..launchElement('click me');

Answer 2

您可以为此添加一个新的构造函数来设置data-name属性：

class SaveBtn {
  // ...
  factory SaveBtn(String label) {
    var btn = new Element.tag(tag);
    btn.setAttribute('data-name', label); // Set properties/call methods here
    return btn;
  }
  // ...
}

Answer 3

name是一个可选参数。传递值时，它将用于按钮的text属性我将它传递给元素类中的字段（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中的自定义元素

3 个答案: