1

我正在尝试在我的 angular2 应用程序中使用 vaadin 网格...根据此处的文档https://vaadin.com/download#elements我已经导入了 webcomponents-lite.min.js 、 vaadin-grid.html 和 vaadin 指令这个例子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 应用程序中工作吗？有人请帮助我

4

1 回答 1

2

我让它工作http://plnkr.co/edit/SjoDN0zOnI88pffB31XK?p=preview

我发现了两个问题：

1) 指向 vaadin-grid.html 的 cdn 链接似乎无效。所以我从凉亭复制了文件。

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-15T18:35:11.573 回答