Angular2 DynamicComponentLoader与参数 [英] Angular2 DynamicComponentLoader with parameters

问题描述

我想箱这会从一个列描述数据和原始数据建立一个表的表的组成部分。

I'm trying to crate a table component which would build up a table from a column description and raw data.

我能够没有问题创造了基本的功能，但我也希望能够覆盖单个细胞的默认渲染，以便能够显示自定义的内容（例如显示链接）。

I was able to create the basic functionality without problem, but I would also like to be able to override the default rendering of a single cell in order to be able to show custom content ( for example to show links ).

在被在数据表的使用，唯一的区别类似的方式是，我希望能在一个名字以通为用参数

In a similar fashion that is used in DataTables, with the only difference being, that I would like to be able to pass in a name for a custom component with parameters

我最初的尝试是这样的事情，但问题出现，如果我实例化列的显示功能的一个组成部分，我不能显示在页面上。

My initial attempt was something like this, but the problem arise that if I instantiate the a component in the display function of the column, I can't show it on the page.

@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 。

在很多头痛和搜索的，我能够发现类似的东西是什么，我在这个<一个寻找href=\"http://stackoverflow.com/questions/32977271/create-dynamic-anchorname-for-dynamiccomponentloader-with-ng-for-in-angular2\">response,即使它不是prettiest。

After a lot of headache and search I was able to found something similar to what I'm looking for in this response, even though it's not the prettiest.

我唯一的问题仍然是，我怎么能传递参数？我没能找到有关与参数动态加载组件的单一参考。任何帮助或建议？

My only question remained is that how can I pass in parameters? I wasn't able to find a single reference regarding to load components dynamically with parameters. Any help or advise?

解决方案：

因此​​，解决方案是使用 DynamicComponentLoader 与它的 loadIntoLocation 功能。在 loadAsRoot 会比较理想，但随着状态的 2.0.0-beta.7 它的车和你不能够实例财产的承诺设置的。

So the solution is to use DynamicComponentLoader with it's loadIntoLocation function. The loadAsRoot would be more ideal, but as of the state of 2.0.0-beta.7 it's buggy and you aren't able to set the instance property from the promise.

因此​​，我所做的是我创建一个组件中，我决定我是否需要实例化一个默认的显示组件或用户要处理它的单元格：
    进口{组件，输入，OnInit的，ElementRef，DynamicComponentLoader，ComponentRef}从'angular2 /核心;

So what I did is that I created a component for cells in which I decide if I need to instantiate a default display component or the user wants to handle it: 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];
      });
    }
  }
}

所以加载财产动态组件的方式是，你需要将其设置为使用 COM preF返回的承诺：ComponentRef 。这将是您可以在其中与 COM pref.instance 访问新创建的组件的实例，并用它作为一个数组来设置它的变量，变量。

So the way to load a dynamic component with property is that you need to set it in the promise returned by using compRef:ComponentRef. This will be a variable in which you can access the instance of the newly created component with compRef.instance and use it as an array to set it's variables.

我的默认视图组件是如此简单：
    进口{分量，输入}从'angular2 /核心;

My default view component is as simple as this: import {Component, Input} from 'angular2/core';

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

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

  constructor() {
  }
}

我希望这将帮助其他人了。

I hope this will help others too.

推荐答案

您可以使用由 loadAsRoot （或 loadNextToLocation 或 loadIntoLocation ）的方法来访问新组件实例，并设置它的元素：

You can use the promise returned by the loadAsRoot (or loadNextToLocation or loadIntoLocation) method to have access to the newly component instance and set elements on it:

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

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

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

});

这篇关于Angular2 DynamicComponentLoader与参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！