Paper Elements 仅在 Dart 中创建 HtmlElements

Question

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

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

我想在我的代码中使用 PaperFab 元素作为操作按钮，并想即时更改它（例如更改图标）。

HTML中的元素定义有一个link:

<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 初始化丢失了。有关详细信息，请参阅。

您需要确保 Polymer 已正确初始化，然后才能通过运行您的代码从 zone.run(() {... } 或 initPolymer().run(() { ... } 或 Polymer 生命周期回调之一中创建元素。如果您在 run 中初始化 Angular，您也可以在 Angular 代码中的任何地方创建 Polymer 元素。

这是命令式创建实例或 Polymer 元素的默认方式

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

但是 core- 和 paper-elements 有一个工厂构造函数，允许它们也使用 new 实例化

new PaperFab();

如果您构建自己的 Polymer 元素，则需要自己添加工厂构造函数才能使用 new 创建新实例。有关详细信息，请参阅。

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

Paper Elements only creates HtmlElements in Dart

web-component

dart

dart-polymer

angular-dart