带参数的Angular2 DynamicComponentLoader

Question

我正在尝试创建一个表组件,它将根据列描述和原始数据构建一个表.

我能够毫无问题地创建基本功能,但我还希望能够覆盖单个单元格的默认呈现,以便能够显示自定义内容(例如,显示链接).

以与DataTables中使用的类似方式,唯一不同的是,我希望能够为具有参数的自定义组件传递名称.

我最初的尝试是这样的,但问题出现了,如果我在列的显示功能中实例化组件,我无法在页面上显示它.

@Component({
  selector: 'gt-table',
  template: `
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th *ngFor="#column of columns">
          {{ column.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="#row of data">
        <td *ngFor="#column of columns">
          {{ displayCell(row, column) }}
        </td>
      </tr>
    </tbody>
  </table>
  `
  })
  export class GTTableComponent implements {
    @Input() data:Array<any>;
    @Input() columns:Array<any>;

  displayCell(row, column) {
    if (column.display !== undefined) {
      return column.display(row[column.name], row);
    } else {
      return row[column.name];
    }
  }
}

在互联网上搜索后,我能够发现,为了在视图中动态加载组件,您需要使用DynamicComponentLoader.

在经历了很多头痛和搜索之后,我能够在这个回复中找到类似于我正在寻找的东西,即使它不是最漂亮的.

我唯一的问题是如何传递参数？我无法找到关于使用参数动态加载组件的单一参考.任何帮助或建议？

解:

因此解决方案是使用DynamicComponentLoader它的loadIntoLocation功能.这loadAsRoot将是更理想的,但从2.0.0-beta.7它的状态到它的错误,你无法从承诺设置实例属性.

所以我所做的是为单元格创建一个组件,我决定是否需要实例化默认显示组件或用户想要处理它:

import {Component, Input, OnInit, ElementRef, DynamicComponentLoader, 
ComponentRef} from 'angular2/core';

import {GTTableDefaultDisplayComponent} from './gt-tabledefaultdisplay.component';
@Component({
    selector: '[gt-cell]',
    template: `<div #content></div>`,
    directives: []
})
export class GTTableCellComponent implements OnInit {
  @Input() row:any;
  @Input() column:any;

  constructor(private _loader: DynamicComponentLoader, private _elementRef: ElementRef) {
  }

  ngOnInit() {
    if (this.column.display !== undefined) {
      this.column.display(this._loader, this._elementRef, 'content',
      this.row[this.column.name],this.row);
    } else {
      this._loader.loadIntoLocation(GTTableDefaultDisplayComponent,
      this._elementRef, 'content').then((compRef:ComponentRef) => {
        compRef.instance['content'] = this.row[this.column.name];
      });
    }
  }
}

因此,使用属性加载动态组件的方法是将其设置在using返回的promise中compRef:ComponentRef.这将是一个变量,您可以在其中访问新创建的组件的实例,compRef.instance并将其用作数组来设置其变量.

我的默认视图组件就像这样简单:从'angular2/core'导入{Component,Input};

import {GTTableLinkComponent} from './gt-tablelink.component';

@Component({
    selector: 'default-display',
    template: `<div>{{content}}</div>`,
    directives: []
})
export class GTTableDefaultDisplayComponent {
  @Input() content:string;

  constructor() {
  }
}

我希望这也能帮助别人.

Answer 1

您可以使用loadAsRoot(或loadNextToLocationor loadIntoLocation)方法返回的promise 来访问新组件实例并在其上设置元素:

dcl.loadAsRoot(ChildComponent, '#child',
   injector).then((compRef:ComponentRef) => {

  // For example
  compRef.param1 = 'something';

  // In your case
  compRef.data = [
    { ... },
    { ... },
    { ... }
  ];
  compRef.columns = [
    'column1', 'column2'
  ];

});