dart - 通过 Dart 代码实例化聚合物元素

Question

我正在尝试在我的 Dart 代码中实例化一个 Polymer 元素。

这是我的元素:

@CustomTag('card-component')
class CardComponent extends PolymerElement {
  @published
  String playerName;

  CardComponent.created() : super.created();
}

到目前为止，我发现唯一可行的方法是:

Element y = new Element.tag('card-component');

但我真正想做的是通过访问器访问我的组件的值(而不是通过 HtmlElement 的属性)。有没有一种方法可以直接在 Dart 中实例化 CardComponent 而无需使用 Element.tag 方式？我尝试以多种方式使用 CardComponent.created() 方法，但它也没有用。

如果您想知道我为什么要这样做，那么我想将参数传递给我的构造函数，或者甚至在理想世界中使用工厂来创建组件。

编辑:阅读后this answer我最终能够做我想做的事。我只需要将它添加到我的组件中

factory CardComponent(String playerName) => document.createElement("card-component")
  ..attributes = {
    "playerName" : playerName
};

然后像这样实例化它:

CardComponent myNewCard = new CardComponent("Pacane");

Answer 1

我不知道你所说的“通过组件的访问器访问我的组件的值(而不是通过 HtmlElement 的属性)”究竟是什么意思

(new Element.tag('card-component') as CardComponent)
    ..playerName = 'blabla';

添加自定义工厂构造函数允许您像使用普通构造函数一样使用元素

@CustomTag('card-component')
class CardComponent extends PolymerElement {
  @published
  String playerName;

  CardComponent.created() : super.created();

  factory CardComponent CardComponent() {
    return new Element.tag('card-component');
  }
}

var cc = new CardComponent()..playerName = 'blabla';

如果你想从 main() 而不是从另一个组件中执行此操作，请确保 main() 包含聚合物(初始化代码 why am I getting type error on polymer.dart element? ， how to implement a main function in polymer apps )