1

Polymer のペーパー ダイアログは Angular2 Dart で使用できますか? 私が見つけることができた唯一の議論は、ここでの質問でした。

コードをAngularコンポーネントに組み込んでみました。$['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>
4

1 に答える 1

1

思ったより簡単でした。他の多くの紙要素と同様に機能します。私のangularコンポーネント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>

これが、ダイアログを呼び出して、それを行う 1 つの方法のアイデアを提供する方法です。残りの 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 でのみテストしました。フォームのコードはこの記事から

于 2016-08-24T04:20:23.710 に答える