Fatal编程技术网
  • dart/
  • Dart “纸张”对话框是否可以与“角度镖”一起使用

Dart “纸张”对话框是否可以与“角度镖”一起使用

dart polymer

Dart “纸张”对话框是否可以与“角度镖”一起使用,dart,polymer,angular-dart,paper-dialog,Dart,Polymer,Angular Dart,Paper Dialog,Polymer的纸张对话框可以与Angular2省道一起使用吗？我唯一能找到的讨论是一个问题 我尝试将代码合并到我的角度分量中。它不喜欢打开对话框时的$['dialogArtist']。然后我创建一个新类 class ArtistDialog extends PolymerElement {... $['dialogArtist]在那里工作。然后我在表单数据方面遇到了问题。它一直在组件中寻找它，而不是在对话框中。对话框html与组件html位于同一个文件中，因此可能与此有关。当我把表格注释掉的

Polymer的纸张对话框可以与Angular2省道一起使用吗？我唯一能找到的讨论是一个问题

我尝试将代码合并到我的角度分量中。它不喜欢打开对话框时的
$['dialogArtist']
。然后我创建一个新类

class ArtistDialog extends PolymerElement {...

$['dialogArtist]
在那里工作。然后我在表单数据方面遇到了问题。它一直在组件中寻找它，而不是在对话框中。对话框html与组件html位于同一个文件中，因此可能与此有关。当我把表格注释掉的时候。它抱怨dialog类缺少初始化器。是否有从Angular2省道组件打开聚合物纸张对话框的示例

我想我需要知道的是我需要在组件中放入什么来打开一个对话框并从中获取数据。我认为上面链接中的示例对于dialog类来说是一个很好的例子。还有，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();
  }
}
我的聚合物成分：

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


爵士猫
window.Polymer=window.Polymer |{}；
window.Polymer.dom='shadow'；
这是我的诊断日志框的html。它与html组件位于同一个文件中

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


这是一个对话
结果比我想象的要容易。它的工作原理与许多其他纸张元素类似。在我的角度分量省道文件中，我有：

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

...
<paper-item (click)="onEditArtist()">Edit</paper-item>
在我的组件模板URL文件中，我有：

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

...
<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。表单的代码来自

为什么聚合元素的代码块中有
@ViewChild（…）
？是否启用了阴影DOM并加载了完整的多边形填充？ViewChild用于我要放入对话框中的表单。该表单在html组件中运行良好。我猜我已经启用了。我不知道完全填充的情况。new ArtistDialog.created（）无法工作，因为无法在自定义元素创建之外调用created。如果我添加一个构造函数，它会给出一个关于聚合物没有构造函数的错误。我只是猜测我在这里还是需要一个新的。请参阅（webcomponentsjs `脚本标记和内联脚本以启用全阴影DOM）中的
index.html
。Dart也是如此（除了可以从聚合包路径加载脚本）。另请参阅，这篇优秀的教程我添加了index.html。我正在使用Dartium进行测试。该项目基于教程，并与许多其他聚合物元素配合使用。我只是猜测对话框的工作方式。我的web搜索没有出现任何示例。我开始觉得只有你和我在做这项工作。我仍然不明白为什么将
@ViewChild（…）
与聚合元素（ArtistDialog）的代码放在同一个文件中。
@ViewChild（）
仅在角度组件中起作用。