Question

我试图将动态创建的自定义Angular组件添加到NativeScript中的GridLayout。我知道如何动态地添加默认的非Angular NativeScript组件，例如Label中的tns-core-modules/ui/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

那将如何工作？

谢谢！

将动态创建的自定义Angular组件添加到Nativescript中的布局

0 个答案: