Question

我正在尝试在我的angular2应用程序中使用vaadin网格...根据此处的文档https://vaadin.com/download#elements我在此示例中导入了webcomponents-lite.min.js，vaadin-grid.html和vaadin指令{ {3}} ...我没有看到任何错误，我也没有看到网格......有人可以告诉我我错过了什么吗？这是我在html中的import语句

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

我的angular2应用程序中是否需要添加更多内容以使vaadin网格工作？有人请帮帮我

Answer 1

我让它工作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

希望它可以帮到你！

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

1 个答案: