在 dart angular2 的组件中使用纸制标签
using paper-tabs in a component in dart angular2
我正在尝试在飞镖 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
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>
像往常一样,当 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/
我正在尝试在飞镖 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
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>
像往常一样,当 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/