纸元素只在Dart中创建HtmlElements

Question

我有一个简单的组件，它包含定义如下的员工列表：

@Component(selector: 'employee-list', templateUrl:
    'employee_list.html', cssUrl: 'employee_list.css')
class EmployeeListComponent extends ShadowRootAware {
...
}

我希望在我的代码中使用一个PaperFab元素，作为一个操作按钮，并希望动态地修改它(例如更改图标)。

HTML中有一个指向元素定义的链接：

<link rel="import" href="packages/paper_elements/paper_fab.html">

以编程方式创建元素：

var fab = new PaperFab(); 
print(fab is PaperFab) // false

或

var fab = new Element.tag('paper-fab') as PaperFab;
// Casts error: type 'HtmlElement' is not a subtype of type 
//    'PaperFab' in type cast.

在通过

var fab = _shadowRoot.querySelection("#fabButton");
print(fab is PaperFab) // false

是否可以从自定义元素中访问纸张元素？或者您是否应该使用innerHTML，这可以工作，但破坏了组件的想法。

Answer 1

我猜你的聚合物初始化缺失了。有关更多详细信息，请参阅https://stackoverflow.com/a/20982658/217408。

在通过在zone.run(() {... }或initPolymer().run(() { ... }中运行代码或从聚合物生命周期回调中运行代码创建元素之前，您需要确保正确初始化聚合物。如果在run中初始化角，也可以在角码中到处创建聚合物元素。

这是创建实例或聚合物元素的默认方法。

var fab = new Element.tag('paper-fab') as PaperFab;

但是核心元素和纸元素都有一个工厂构造函数，它允许使用新元素实例化它们。

new PaperFab();

如果您构建自己的聚合物元素，您需要自己添加一个工厂构造函数，以便能够使用new创建新实例。有关更多详细信息，请参阅https://stackoverflow.com/a/27616062/217408。

Answer 2

除了Günter的答复外：

在main.dart中，结构现在如下所示，将其与AngularDart结合起来：

void main() {
  initPolymer().then((zone) => zone.run(() {
    Polymer.onReady.then((_) {
      Logger.root
        ..level = Level.FINEST
        ..onRecord.listen((LogRecord r) {
          print(r.message);
        });

      applicationFactory().addModule(new MyAppModule()).run();
    });
  }));
}

并解决烟雾库中的任何问题，在pubspec.yaml中添加聚合物变压器

transformers:
- angular:
    html_files:
    ...
- polymer:
    entry_points: web/index.html