Paper-Dialog 可以与 AngularDart 一起使用吗答案

【问题标题】：Can Paper-Dialog be Used with AngularDartPaper-Dialog 可以与 AngularDart 一起使用吗
【发布时间】：2016-08-23 00:51:42
【问题描述】：

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

我的聚合物成分：

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

【问题讨论】：

为什么 Polymer 元素的代码块中有@ViewChild(...)？您是否启用了 shadow DOM 并加载了完整的 polyfill？
ViewChilds 用于我想放入对话框的表单。表单在组件 html 中时工作正常。我猜我启用了它。我不知道完整的polyfills。新的 ArtistDialog.created() 不起作用，因为 created 不能在自定义元素创建之外调用。如果我添加一个构造函数，它会给出关于 Polymer 没有构造函数的错误。我只是猜想我还是需要一个新的。
参见plnkr.co/edit/kMuyWiNfDwrLSSc3JGDx?p=preview 中的index.html（webcomponentsjs` 脚本标签和内联脚本以启用完整的shadow DOM。Dart 也是如此（除了您可以从聚合物包路径加载脚本） . 另见polymer-project.org/1.0/docs/devguide/settings 和这个优秀的教程dart.academy/dart-angular-2-and-polymer-together
我添加了我的 index.html。我正在使用 Dartium 进行测试。该项目基于教程，并与许多其他 Polymer 元素配合使用。我只是在猜测对话将如何工作。我的网络搜索没有出现任何示例。我开始觉得你和我是唯一做这项工作的人。
我仍然不明白为什么您在与聚合物元素 (ArtistDialog) 的代码相同的文件中包含 @ViewChild(...)。 @ViewChild() 只能在 Angular 组件中工作。

标签： dart polymer angular-dart paper-dialog

【解决方案1】：

结果比我想象的要容易。它像许多其他纸张元素一样工作。在我的角度组件飞镖文件中，我有：

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

【讨论】：