我正在尝试将动态创建的自定义Angular组件添加到NativeScript中的 GridLayout . 我知道如何从 tns-core-modules/ui/label 动态添加默认的非Angular NativeScript组件，例如 Label ，但它似乎与Angular组件的工作方式不同 .

我正在关注post，它描述了如何在纯Angular中完成它 . 它似乎几乎在NativeScript中工作，但并非完全如此 . 到目前为止，我使用的是这样的模板：

<GridLayout #grid>
 </GridLayout>

然后在代码中我尝试类似下面的内容：

@ViewChild('grid') gridRef:ElementRef;

public ngAfterViewInit() {

  let grid = this.gridRef.nativeElement;
  grid.addRow(new ItemSpec(1, GridUnitType.AUTO));
  grid.addColumn(new ItemSpec(1, GridUnitType.STAR));

  let componentFactory = this.cfr.resolveComponentFactory(MyCustomComponent);
  let componentRef = componentFactory.create(this.vcr.injector, null, grid);
  componentRef.instance.myproperty = 'some value'; // pass input

  this.appRef.attachView(componentRef.hostView); // add to ng component tree for change detection

  const component = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0];
  grid.addChild(component);
}

在最后一步之后，我确实看到网格已经分配了组件所需的空间，但没有显示 . 如果我注释掉最后一步，那么确实保留的空间就消失了 . 我还确认rootNodes数组只有一个元素 .

任何人都知道我可能会缺少什么？我想问题是如何获取Angular视图并将其转换为NativeScript视图，因此我可以执行 grid.addChild 以及下面的操作以将新创建的组件分配给特定的行/列 .

GridLayout.setRow(component,0); // fix to grid row
GridLayout.setColumn(component,index); // fix to grid column

那将如何运作？

谢谢！

nativescript angular2-nativescript