Mit Vaadin Grid in angular2 Anwendung

Question

Ich versuche Vaadin Grid in meiner angular2 Anwendung zu verwenden ... Wie in der Dokumentation hier https://vaadin.com/download#elements Ich habe webcomponents-lite.min.js, Vaadin-Grid.html und Vaadin Direktive in diesem importiert Beispiel http://plnkr.co/edit/B9216vP7kDlDkN44kriB?p=preview ... Ich sehe keine Fehler und ich sehe auch das Raster nicht ... kann mir bitte jemand sagen, was ich vermisse? Hier sind meine Import-Anweisungen in html

<link rel="import" href="https://cdn.vaadin.com/vaadin-core-elements/latest/vaadin-grid/vaadin-grid.html"> 
<script src="http://polygit.org/polymer+:master/components/webcomponentsjs/webcomponents-lite.min.js"></script> 

Dies ist die Richtlinie von der Dokumentation

import {Directive, ElementRef, Input, Output, EventEmitter} from '@angular/core'; 

const Polymer = (<any>window).Polymer; 

@Directive({selector: 'vaadin-grid'}) 
export class VaadinGrid { 

@Output('grid-ready') gridReady: EventEmitter<any> = new EventEmitter(false); 

private grid: any; 

constructor(el: ElementRef) { 
if (!Polymer || !Polymer.isInstance(el.nativeElement)) { 
    console.error("vaadin-grid has not been registered yet, please remember to import vaadin-grid.html in your main HTML page."); 
    return; 
} 
this.grid = el.nativeElement; 
} 

ngAfterViewInit() { 
// Configuration <table> might be placed in a wrong container. 
// Let's move it in the light dom programmatically to fix that. 
var localDomTable = this.grid.querySelector("table:not(.vaadin-grid)"); 
if (localDomTable) { 
    Polymer.dom(this.grid).appendChild(localDomTable); 
} 

this.grid.then(() => { 
    this.gridReady.emit(this.grid); 
}); 
} 
} 

Gibt es etwas, was ich brauche für die Herstellung Vaadin Gitterwerk in meinem angular2 App mehr hinzufügen? Jemand bitte helfen Sie mir

Answer 1

ich es gemacht Arbeiten http://plnkr.co/edit/SjoDN0zOnI88pffB31XK?p=preview

fand ich zwei Fragen:

1) Es scheint, dass CDN-Link zu Vaadin-grid.html nicht gültig ist. Also habe ich Dateien von Bower kopiert.

2) Sie haben vergessen, auf WebComponentsReady Veranstaltung wie diese abonnieren:

window.addEventListener('WebComponentsReady', function() { 
    System.import('app').catch(function(err){ console.error(err); }); 
}); 

Außerdem habe ich gut einen Text https://github.com/vaadin/expense-manager-ng2-demo

Hoffe, es hilft Ihnen gefunden!