Question

聚合物的纸张对话可以与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;
  }

我的聚合物成分：

//@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">

这是我的diaglog框的html。它与组件html在同一个文件中。

<polymer-element name="dialogArtist">
  <paper-dialog id="dialog">
    <p>This is a dialog.</p>
  </paper-dialog>
</polymer-element>

Answer 1

事实证明这比我想象的要容易。它像许多其他纸质元素一样工作。在我的角度组件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

可以将Paper-Dialog与AngularDart一起使用

1 个答案: