在 dart angular2 的组件中使用 paper-tabs

2024-03-10

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

在以下代码中,index.html 模板中指定的 paper-tabs 工作正常,但 main-app.html 中的 paper-tabs 格式不正确,并且在没有任何适当动画的情况下单击时会消失。

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

索引.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>

像往常一样,当 Polymer 与 Angular2 一起使用时,您需要启用完整的 Shadow 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/ https://dart.academy/dart-angular-2-and-polymer-together/

GitHub 上的 Repo 项目 https://github.com/bwu-dart-playground/angular2/blob/master/so36720611_paper_tabs/web/index.html#L10

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 dart angular2 的组件中使用 paper-tabs 的相关文章

随机推荐

  • ChartJS 不使用 Moment.js 显示时间数据

    我正在尝试按小时绘制给定日期的一系列数据点 并非每个小时都包含在数据集中 但我仍然想显示从 0 00 23 00 的时间并绘制可用的数据点 我的错误是 该方法未实现 要么找不到适配器 要么找不到适配器 提供了不完整的集成 然而 纵观文档 h
  • 在 Perl 中将 UTF8 字符串转换为 ASCII

    我已经尝试了 Google 和 StackOverflow 推荐的 我能找到的 所有内容 包括使用 Encode 我的代码可以工作 但它只使用 UTF8 并且我收到宽字符警告 我知道如何解决这些警告 但我没有将 UTF8 用于其他任何用途
  • 隐藏除前 4 个元素之外的所有元素

    有无穷无尽的元素 我想要做的是隐藏除前 4 个元素之外的所有元素 带有 not 选择器 我想让点击全部可见 这可以用CSS实现吗 ul li li li li li li li li li li must hide li li must h
  • 使用 Base64 图像的 HTML 到 PDF 会抛出 FileNotFoundException

    我正在使用 itextpdf 5 0 6 jar Java 8 当我尝试使用 base64 图像标签导出 html 代码时 出现文件未找到异常 如果我删除图像标签 一切都会很好 我发现了一些关于覆盖图像标签处理器的解决方案 但大多数都是旧的
  • 关闭 Selenium IDE 中新打开的选项卡或窗口

    在 Windows7 和 Firefox 中使用 Selenium IDE 自动单击链接可能会生成新选项卡或新窗口 close 关闭原始窗口或选项卡 而不是新窗口或选项卡 也许如果我有新创建的 ID 我可以选择它然后关闭它 但我不知道如何自
  • 对两个对象数组的数据求和

    我有两个对象数组 我想对具有相同键 在本例中为 id 的对象求和 如果没有匹配键 则只需创建一个新的 如果我是 我很抱歉没有解释清楚 我对 JavaScript Array Object 很陌生 var dataOne id 1 total
  • 将另一个声音添加到 .NET Speech 中

    如何将其他声音添加到 NET Speech 中 我想使用捷克语语音 我找到了一些 sis files Eliska22k sis但我不知道如何使用它 SpeechSynthesizer synth new SpeechSynthesizer
  • Common Lisp 案例和引用元素

    我正在用 CL 编写一个地下城爬行游戏 但在处理案例表单时遇到了问题 两件事情 Common Lisp 抱怨Duplicate keyform QUOTE in CASE statement make instance cl rogue t
  • 如何在 python-flask 中添加自定义字体?

    我尝试过使用 fontface css 样式 但字体没有渲染 还有另一种方法可以使用 python flask 来做到这一点吗 p style font family trial font weight bold Hello p 上面是我的
  • 使 Div 向上滚动时返回到其原始位置

    当您向下和向上滚动时 我有一个带动画的 div 问题是 当我非常快地向上和向下滚动而不让 div 完成其动画时 div 会逐渐从上部屏幕中消失 如果我删除 animate 函数中的 stop 并快速上下滚动 div 会继续执行此操作一段时间
  • 如何在Android Studio上实时查看Sqlite数据库中插入的数据

    你能帮我解决这个问题吗 我正在将值插入到我的 Sqlite 数据库中 如何检查或查看插入的数据 有没有任何工具或其他技术来显示数据 如果您想显示数据Log尝试下面的代码 for Contact cn contacts String log
  • .NET Standard 2.0 无法在 .NET Framework 2.0 中引用

    我收到一个错误 c xxxx csproj 目标为 NETStandard Version v2 0 它无法被面向 NETFramework Version v2 0 的项目引用 WindowsFormsApp1 如何解决 遗憾的是 您无法
  • 用核心运动计算倾斜角

    我的申请有一个记录会话 当用户开始记录会话时 我开始从设备的 CMMotionManager 对象收集数据并将它们存储在 CoreData 上以供稍后处理和呈现 我正在收集的数据包括 GPS 数据 加速度计数据和陀螺仪数据 数据的频率为10
  • 将 webkit 滚动条样式应用于指定元素

    我对以双冒号为前缀的伪元素很陌生 我看到一篇博客文章讨论使用一些仅适用于 webkit 的 css 来设置滚动条的样式 伪元素 CSS 可以应用于单个元素吗 This works by applying style to all scrol
  • 在节点主管中,如何监视目录中的所有内容是否发生更改?

    https github com isaacs node supervisor https github com isaacs node supervisor 我想查看 api 目录及其所有子目录内的所有内容 递归地 我怎样才能做到这一点
  • CouchDB 入门

    我已经在我的 Linux 云服务器上安装了 CouchDB 并且我正在尝试访问 Futon 欢迎屏幕 O Reilly 书中说要转到 127 0 0 1 portnum 但我不在本地主机上工作 它是我的远程服务器 所以我应该能够使用 xxx
  • 使用指定的初始化器初始化数组时出现奇怪的值

    当我初始化下面的数组时 所有输出看起来都正常 除了values 3 因为某些原因values 3 初始化为values 0 values 5 正在输出一个非常大的数字 我的猜测是我正在尝试分配values 0 values 5 在它们被正确
  • Android 中如何获取联系人信息

    我正在开发一个在android平台上编写短信的应用程序 为此 我需要获取 联系人 最近联系人 和 组 请告诉我任何教程或如何执行此操作的代码 当我们单击这三个按钮中的任何一个时 应该会出现联系人以及用于选择多个联系人的复选框 谢谢 这是以编
  • Three.js 如何从向量和常量得到平面?

    在 Three js 中 构造函数数学平面 http threejs org docs api math Plane html需要 2 个输入 法线 Vector3 定义指向原点的平面的法线向量 Constant Float 沿法向量从原点
  • 在 dart angular2 的组件中使用 paper-tabs

    我正在尝试在 dart Angular2 组件中使用聚合物纸标签 但我做不到 下面的代码中我缺少什么 在以下代码中 index html 模板中指定的 paper tabs 工作正常 但 main app html 中的 paper tab