Paper-Dialog 可以和 AngularDart 一起使用吗

Question

Polymer 的 paper-dialog 可以和 Angular2 Dart 一起使用吗？我能找到的唯一讨论是一个问题 .

我尝试将代码合并到我的 angular 组件中。它不喜欢打开的对话框中的 $['dialogArtist']。然后我创建一个新的 class

class ArtistDialog extends PolymerElement {...

$['dialogArtist] 在那里工作。然后我在表单数据方面遇到了问题。它一直在组件而不是对话框中寻找它。对话框 html 与组件 html 在同一个文件中，因此这可能与它有关。当我注释掉表格时。它抱怨缺少对话框 class 的初始化程序。是否有从 Angular2 Dart 组件打开 Polymer 纸张对话框的示例？

我想我需要知道的是我需要在组件中放入什么来打开对话框并从中获取数据。我认为上面 link 中的例子很适合对话 class。还有对话框 html 去哪儿了？

我的 angular 组件的相关部分：

@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;
  }

我的聚合物成分：

//@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();
  }
}

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

Answer 1

事实证明比我想象的要容易。它像许多其他纸元素一样工作。在我的 angular 组件飞镖文件中，我有：

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

Paper-Dialog 可以和 AngularDart 一起使用吗

Can Paper-Dialog be Used with AngularDart

dart

polymer

angular-dart

paper-dialog