AngularDartで紙のダイアログを使用することができます

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

角度成分にコードを組み込みました。ダイアログに「$['dialogArtist']」が表示されないようにしました。私は次に新しいクラスを作成します

$['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>

出典

2016-08-23 curt

です。なぜ、ポリマーエレメントのコードブロックに '@ViewChild（...）'がありますか？シャドーDOMを有効にして完全なポリフィルをロードしましたか？ –

ViewChildsは、ダイアログに配置するフォームのものです。フォームはコンポーネントhtmlにあったときにうまく機能しました。私はそれを有効にしていると思います。私は完全なポリフィルについては知らない。新しいArtistDialog.created（）は、作成された要素をカスタム要素の作成の外側で呼び出すことができないため、機能しません。コンストラクタを追加すると、それはコンストラクタを持たないPolymerに与えられ、エラーになります。私はちょうど私がとにかく新しいここが必要であることを推測しています。 – curt

http://plnkr.co/edit/kMuyWiNfDwrLSSc3JGDx?p=preview（webcomponentsjs'スクリプトタグとインラインスクリプト）の 'index.html'を参照して、完全シャドーDOMを有効にしてください。これはDartでも同じです（ただしスクリプト代わりにポリマパッケージのパスから入手してください）。https://www.polymer-project.org/1.0/docs/devguide/settingsとこの優れたチュートリアルhttps://dart.academy/dart-angular-2-and-polymerも参照してください。 -together/ –

私は思ったよりも簡単だったことが判明しました。それは他の多くの紙要素のように機能します。

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>

これは、ポリマー中に私の最初の一形態であると、このように私の最初のダイアログでは、それを行うためのクリーンな方法ではないかもしれません。また、私はDartiumとChromeでのみテストしました。フォームのコードはthis article

出典

2016-08-24 04:20:23 curt

AngularDartで紙のダイアログを使用することができます

答えて

関連する問題