Polymer 的纸质对话框可以与 Angular2 Dart 一起使用吗？我能找到的唯一讨论是一个问题 here .
我尝试将代码合并到我的角度组件中。它不喜欢 $['dialogArtist']在打开的对话框中。然后我创建一个新类
class ArtistDialog extends PolymerElement {...
$['dialogArtist]在那里工作。然后我遇到了表单数据的问题。它一直在组件中而不是对话框中寻找它。对话框 html 与组件 html 位于同一文件中，因此可能与它有关。当我注释掉表格时。它提示对话框类缺少初始化程序。有没有从 Angular2 Dart 组件打开 Polymer 纸质对话框的示例？我想我需要知道的就是我需要在组件中放入什么来打开一个对话框并从中获取数据。我认为上面链接中的示例对于对话框类来说是一个很好的示例。还有对话框html去哪里了？
我的角度分量的相关部分:
@Component(selector: 'my-artists',
templateUrl: 'artists_component.html',
//encapsulation: ViewEncapsulation.Native, // added for polymer
styleUrls: const['artist.css']
)
class ArtistsComponent implements OnInit {
...
ArtistDialog editDialog;
void ngOnInit() {
getArtists();
editDialog = new ArtistDialog.created();
}
void onEditArtist() {
editArtist = selectedArtist;
editDialog.open;
}
我的 polymer 成分:
//@CustomTag('dialogArtist'); //uncomment this cause and error
class ArtistDialog extends PolymerElement {
String birth_year;
ArtistDialog.created() : super.created();
//@observable int selected = 0; // uncommenting this causes and error
void open() {
$['dialogArtist'] as PaperDialog..open();
}
}
索引.html:
<!DOCTYPE html>
<html>
<head>
<title>Jazz Cat</title>
<script>
window.Polymer = window.Polymer || {};
window.Polymer.dom = 'shadow';
</script>
<!-- For testing using pub serve directly use: -->
<base href="/">
<!-- For testing in WebStorm use: -->
<!-- <base href="/dart/web/"> -->
<link rel="import" href="packages/polymer/polymer.html">
<link rel="import" href="packages/polymer_elements/iron_flex_layout.html">
<link rel="import" href="packages/polymer_elements/paper_header_panel.html">
<link rel="import" href="packages/polymer_elements/paper_toolbar.html">
<link rel="import" href="packages/polymer_elements/paper_menu.html">
<link rel="import" href="packages/polymer_elements/paper_item.html">
<link rel="import" href="packages/polymer_elements/paper_menu_button.html">
<link rel="import" href="packages/polymer_elements/paper_input.html">
<link rel="import" href="packages/polymer_elements/paper_dialog.html">
<link rel="import" href="packages/polymer_elements/iron_list.html">
<link href="master.css" rel="stylesheet" type="text/css" />
<style is="custom-style">
这是我的对话框的 html。它与组件 html 在同一个文件中。
<polymer-element name="dialogArtist">
<paper-dialog id="dialog">
<p>This is a dialog.</p>
</paper-dialog>
</polymer-element>
最佳答案
结果比我想象的要容易。它像许多其他纸张元素一样工作。在我的角度组件 Dart 文件中，我有:
import 'package:polymer_elements/paper_input.dart';
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_dialog.dart';
...
class ArtistsComponent implements OnInit {
...
PaperDialog artistDialog;
// Dialog fields
String birth_year;
....
void ngOnInit() {
getArtists();
artistDialog = querySelector('#artistDialog');
...
void onEditArtist() {
birth_year = selectedArtist.birth_year;
artistDialog.open();
}
void onDialogSubmit([bool enter = false]) {
selectedArtist.birth_year = birth_year;
}
void onDialogCancel() {
print("canceled");
}
在我的组件 templateUrl 文件中，我有:
...
<paper-item (click)="onEditArtist()">Edit</paper-item>
这就是我调用对话框的方式，让您了解一种方法。在 html 其余部分之外的同一文件中:
<paper-dialog id="artistDialog">
<form #artistForm="ngForm">
<h3>Edit Artist</h3>
<paper-input #artistInput type="text" ngDefaultControl
[(ngModel)]="birth_year" ngControl="artistInputCtrl"
label="Birth Year" required allowed-pattern="[0-9]" maxlength="4"
(keyup.enter)="onDialogSubmit(true)">
{{ birth_year }}
</paper-input>
<div>
<paper-button (click)="onDialogCancel()" raised dialog-dismiss>Cancel</paper-button>
<paper-button (click)="onDialogSubmit()" raised dialog-confirm autofocus>Accept</paper-button>
</div>
</form>
</paper-dialog>
这是我在 Polymer 中的第一个表单，也是我的第一个对话框，所以这可能不是最干净的方式。另外，我只在 Dartium 和 Chrome 中进行了测试。表格代码来自 this article
关于dart - Paper-Dialog 可以与 AngularDart 一起使用吗，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39090750/