在angular2應用中使用Vaadin網格

我想在我的angular2應用中使用vaadin網格...按照這裏的文檔https://vaadin.com/download#elements我已經導入了webcomponents-lite.min.js，vaadin-grid.html和vaadin指令。示例http://plnkr.co/edit/B9216vP7kDlDkN44kriB?p=preview ...我沒有看到任何錯誤，我也沒有看到網格...有人可以告訴我我失蹤了嗎？以下是HTML在angular2應用中使用Vaadin網格

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

我import語句這是從文檔

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

的指令是有一些東西，我需要增加更多的製造vaadin電網的工作在我angular2應用程序？有人請幫我

來源

2016-05-15 abhilash reddy

我做這個工作http://plnkr.co/edit/SjoDN0zOnI88pffB31XK?p=preview

我發現了兩個問題：

1）看來，CDN鏈接vaadin-grid.html無效。所以我從涼亭複製文件。

2）你忘了在WebComponentsReady事件訂閱類似這樣的：

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

而且，我發現了一個很好的樣板https://github.com/vaadin/expense-manager-ng2-demo

希望它可以幫助你！

來源

2016-05-15 18:35:11 yurzui

謝謝@yurzui ... –

在angular2應用中使用Vaadin網格

回答

相關問題