将参数/输入数据传递给 DART 中的自定义元素答案

【问题标题】：passing parameter/input data to custom elements in DART将参数/输入数据传递给 DART 中的自定义元素
【发布时间】：2023-04-04 00:26:03
【问题描述】：

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

我的元素代码是：

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

【问题讨论】：

标签： dart dart-html

【解决方案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');

【讨论】：

【解决方案2】：

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

【讨论】：

如果我想传递多个可选参数怎么办，我尝试了工厂 SaveBtn({String name, var width}) => (new Element.tag(tag) as SaveBtn)..name =名称..样式宽度=宽度；但收到错误：“SaveBtn”中没有这样的设置器“StyleWidth”
要么将字段 StyleWidth 添加到 SaveBtn 类，如 name 并在 attached() 中设置值，要么尝试按照我更新的答案（未测试）中所示的方式进行操作。跨度>
{ } 不适用于多个可选项目，[ ] 有效，但宽度未更改
什么是{} 和[]。是不是少了点什么。。可能是 CSS 问题。您可以尝试使用 CSS 而不是代码来应用此样式设置。也许您需要添加display = 'block' 以使width 工作。
SaveBtn({String name, String width}) 给出错误，告诉需要 0 个参数，但 SaveBtn([String name, String width]) 没有给出任何错误，我在样式，但没有改变，即使使用 display = 'block' 也没有改变

【解决方案3】：

您可以简单地为此添加一个新的构造函数来设置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;
  }
  // ...
}

【讨论】：