Question

我是Angular 2的新手。我想问一下如何实例化动态组件。

我创建了带有一些输入和一些输出（事件）的角度2分量XyComponent。

@Component({
  selector: 'xy',
  templateUrl: 'xy.component.pug',
  styleUrls: ['xy.component.scss'],
})
export class XyComponent {
  @Input()
  public x: any = null;

  @Output('xyEvent')
  xyEventEmitter: EventEmitter<XyEvent> = new EventEmitter<XyEvent>();

  constructor(myElementRef: ElementRef) {}

  getElementRef() { return myElementRef; }
}

使用其指令<xy></xy>在编译的角度模板中使用时，组件工作正常。

在另一个XyView组件中，我使用vaadin-grid来显示表格数据。我有很多行，所以我通过函数将数据读取到网格中。

<vaadin-grid id="grid" [items]="itemsFunction"></vaadin-grid>

我希望一列有一个特殊的渲染器，并在该列中使用XyComponent。我已经设置了渲染器：

// in XyView component:
this.grid = document.querySelector('#grid');

this.grid.columns[column.index].renderer = (cell: any) => {

  // ... how to create an XyComponent instance and pass it to grid ?

}

当渲染器将简单文本创建为cell.element.textContent或将简单html创建为cell.element.innerHTML时，一切正常。

我尝试过实例化组件programaticaly：

this.grid.columns[column.index].renderer = (cell: any) => {

  let xy = new XyComponent(null); // ? don't know the root element of cell
  xy.x = 'AAA';
  let subscription = xy.xyEventEmitter.subscribe(
    event => console.log("xyEvent fired"),
    error => console.log("xyEvent error"),
    () => console.log("xyEvent finished")
  );

  cell.element = xy;
  // cell.element = xy.getMyElementRef();
  // cell.element = xy.getMyElementRef().nativeElement;

}

但这些都没有奏效。

我应该如何创建组件实例以正确渲染到网格中？

如何在vaadin网格自定义渲染器中创建角度2组件

0 个答案: