Angular 在dart ANGLAR2中的零部件中使用纸张标签_Angular_Dart_Dart Polymer

Angular 在dart ANGLAR2中的零部件中使用纸张标签

angular dart

Angular 在dart ANGLAR2中的零部件中使用纸张标签,angular,dart,dart-polymer,Angular,Dart,Dart Polymer,我试图在省道角度组件中使用聚合物纸张标签，但无法实现。我在下面的代码中遗漏了什么在下面的代码中，index.html模板中指定的纸张选项卡工作正常，但main-app.html中的纸张选项卡格式不正确，在没有任何适当动画的情况下单击会消失公开发行主应用程序 main_app.html MA项目一 MA项目二 MA项目三当聚合物与Angular2一起使用时，通常需要启用全阴影DOM 将此添加到其他脚本标记之前 <script src="packages/web_components

我试图在省道角度组件中使用聚合物纸张标签，但无法实现。我在下面的代码中遗漏了什么

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

公开发行

主应用程序

main_app.html


MA项目一
MA项目二
MA项目三

当聚合物与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>


/*导入聚合物之前必须运行此脚本*/
窗口聚合物={
dom:“影子”，
懒汉：没错
};

有关此主题的更多详细信息，请参阅

将上述内容添加到index.html中，纸张选项卡现在可以正常工作。如果其他人遇到：我注意到，将lazyRegister设置为true会导致自定义元素中的霓虹灯动画出现一些问题。使用时，我的动画不会运行，我发现

my element:transform animation not found（或使用的其他动画）将显示在日志中。将lazyRegister设置为false（默认值）可消除此问题。
<!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>

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, []);
}

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() { }
}

<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>

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