Can Paper-Dialog可與AngularDart一起使用

Can Polymer的紙對話框可與Angular2 Dart一起使用嗎？我能找到的唯一討論是一個問題here。Can Paper-Dialog可與AngularDart一起使用

我嘗試將代碼合併到我的角度組件中。它不喜歡打開對話框上的$['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>

來源

2016-08-23 curt

爲什麼在Polymer元素的代碼塊中有'@ViewChild（...）'？你是否啓用了陰影DOM並加載了完整的polyfills？ –

ViewChilds用於我想要放入對話框的窗體。表單在組件html中工作正常。我猜測我已啓用它。我不知道完整的polyfills。新的ArtistDialog.created（）不起作用，因爲在自定義元素創建之外不能調用創建的元素。如果我添加一個構造函數，它給出了沒有構造函數的聚合物的錯誤。我只是猜測我無論如何都需要一個新的。 – 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

Can Paper-Dialog可與AngularDart一起使用

回答

相關問題