dart - Paper Elements仅在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

我认为您的Polymer初始化丢失了。
有关更多详细信息，请参见https://stackoverflow.com/a/20982658/217408。

您需要确保Polymer正确初始化，然后才能通过从zone.run(() {... }或initPolymer().run(() { ... }或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。