在 angular2 应用程序中使用 Vaadin 网格

Question

我正在尝试在我的 angular2 应用程序中使用 vaadin 网格...根据此处的文档 https://vaadin.com/download#elements i have imported webcomponents-lite.min.js , vaadin-grid.html and vaadin directive in this example http://plnkr.co/edit/B9216vP7kDlDkN44kriB?p=preview...我没有看到任何错误，我也没有看到网格...有人可以吗告诉我我错过了什么？这是我在 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>

这是文档中的指令

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 应用程序中工作，我需要添加更多内容吗？有人请帮助我

Answer 1

我成功了http://plnkr.co/edit/SjoDN0zOnI88pffB31XK?p=preview

我发现了两个问题：

1) cdn link 到 vaadin-grid.html 似乎无效。所以我从 bower 复制了文件。

2) 您忘记像这样订阅 WebComponentsReady 事件：

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

此外，我找到了一个很好的样板文件https://github.com/vaadin/expense-manager-ng2-demo

希望对您有所帮助！

在 angular2 应用程序中使用 Vaadin 网格

Using Vaadin grid in angular2 application

vaadin-grid

angular