在 dart angular2 的组件中使用纸张标签答案

【问题标题】：using paper-tabs in a component in dart angular2在 dart angular2 的组件中使用纸张标签
【发布时间】：2016-08-11 18:18:44
【问题描述】：

我正在尝试在 dart angular2 组件中使用聚合物纸标签，但我做不到。我在下面的代码中缺少什么？

在下面的代码中，index.html 模板中指定的纸张标签工作正常，但 main-app.html 中的纸张标签格式不正确，并且在没有任何适当动画的情况下单击时消失。

pubspec.yaml

name: tabs_test
version: 0.0.1
description: Test Paper Tabs
environment:
  sdk: '>=1.13.0 <2.0.0'
dependencies:
  angular2: ^2.0.0-beta.13.1
  polymer: ^1.0.0-rc.16
  polymer_elements: ^1.0.0-rc.8
transformers:
- polymer:
    entry_points: web/index.html
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    - 'package:angular2/common.dart#FORM_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tab Test</title>
    <script defer src="main.dart" type="application/dart"></script>
  </head>
  <body>
    <main-app></main-app>
    <paper-tabs selected="0"> <!-- THESE WORK -->
      <paper-tab>INDEX ITEM ONE</paper-tab>
      <paper-tab>INDEX ITEM TWO</paper-tab>
      <paper-tab>INDEX ITEM THREE</paper-tab>
    </paper-tabs>
  </body>
</html>

main.dart

import 'package:polymer/polymer.dart';
import 'package:angular2/platform/browser.dart';
import 'package:tabs_test/views/main_app/main_app.dart';

main() async {
  await initPolymer();
  bootstrap(MainApp, []);
}

main_app.dart

import 'package:angular2/angular2.dart';
import 'package:polymer_elements/paper_tabs.dart';
import 'package:polymer_elements/paper_tab.dart';

@Component(selector: 'main-app',
    templateUrl: 'main_app.html',
    providers: const[],
    directives: const []
)
class MainApp {
  MainApp() { }
}

main_app.html

<paper-tabs selected="0"> <!-- THESE DO NOT WORK -->
  <paper-tab>MA ITEM ONE</paper-tab>
  <paper-tab>MA ITEM TWO</paper-tab>
  <paper-tab>MA ITEM THREE</paper-tab>
</paper-tabs>

【问题讨论】：

标签： angular dart dart-polymer

【解决方案1】：

像往常一样，当 Polymer 与 Angular2 一起使用时，您需要启用完整的阴影 DOM

在其他脚本标签之前添加它

<script src="packages/web_components/webcomponents.js"></script>
<script>
   /* this script must run before Polymer is imported */
   window.Polymer = {
     dom: 'shadow',
     lazyRegister: true
   };
 </script>

有关此主题的更多详细信息，请参阅https://dart.academy/dart-angular-2-and-polymer-together/

Repo project on GitHub

【讨论】：

将上述内容添加到 index.html 中，paper-tabs 现在可以正常工作了。
万一其他人遇到：但是我注意到将lazyRegister设置为true会导致自定义元素中的霓虹动画出现一些问题。使用时，我的动画不会运行，我发现 my-element: transform-animation not found!（或使用的其他动画）会出现在日志中。将lazyRegister 设置为false（默认）可以消除这种情况。