Question

我正在重写我在Angular 2中编写的Angular 1网格。网格的一个特性是能够扩展行（tr）以查看细节。我在Angular 1中的方法是在tr上放置一个属性指令。这个指令将使用$ compile创建一个新的tr，并在它之前的tr之后插入它。单击第一个tr上的按钮时，它下面的按钮就会显示出来。我一直试图弄清楚如何在角度2中做一段时间并且已经没有想法了。我已经想出了如何在另一个内部动态渲染组件，而不是作为兄弟。我希望有人至少能指出我正确的方向。以下是我在Angular 1中所做的一般概念.ng-if中的行是在此之前的tr行：

      template = '<tr class="cs-grid-detail-row" ng-if="row.isExpanded"><td colspan="' + (colCount || tds.length) + '"><' + component + ' data="data"></' + component + '></td></tr>';
      tr.after($compile(template)(scope));

Answer 1

一旦我真正理解了ViewContainerRef并且它创建了一个兄弟组件，结果很容易分享。我首先使用tr [grid-row]的选择器为我的网格行创建一个组件。在ngOnInit中的那个组件里面我做了这个：

 this.resolver.resolveComponent(this.row.component).then(factory=>{
        const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        var cmp = this.vcRef.createComponent(factory, 0, injector, []);
        cmp.instance.colCount = this.columns.length + 1;
        cmp.instance.row = this.row;

    });

当然为了正确渲染，您解析的组件的模板必须包装在tr和td中。 td是我传入列数的原因，这样可以做colspan。

Angular 2和渲染兄弟元素

1 个答案: