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

我认为你的Polymer初始化缺失了。有关详细信息，请参阅https://stackoverflow.com/a/20982658/217408。

您需要确保在通过在zone.run(() {... }或initPolymer().run(() { ... }或其中一个Polymer生命周期回调中运行代码来创建元素之前正确初始化Polymer。如果在run中初始化Angular，您也可以在Angular代码中的任何位置创建Polymer元素。

这是强制创建实例或Polymer元素的默认方式

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

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

new PaperFab();

如果您构建自己的Polymer元素，则需要自己添加工厂构造函数，以便能够使用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

Paper Elements仅在Dart中创建HtmlElements

2 个答案: