Question

如果我在组件中有viewContainerRef，我可以动态注入我的组件，即：在我的组件中，我声明：

@ViewChild('parent', {read: ViewContainerRef})

在我的模板中我有

<div #parent></div>

我的目标是建立一个循环通过少量数据集的表。单击某个项目时，它应该动态加载组件。我遇到的问题是当我点击一个元素并添加了viewContainerRef时，此时组件不知道父引用是什么。

有什么想法吗？

完整代码

export class MyComponent {
    @Input() someData: any;

    @ViewChild('parent', {read: ViewContainerRef})
    parent: ViewContainerRef;
    childComponent= null;
    errorMessage:any;

   constructor (private myService: MyService, private componentFactoryResolver: ComponentFactoryResolver) {
      this.childComponent = this.componentFactoryResolver.resolveComponentFactory(AnotherComponent); 
   }



   //Show child when row clicked
    showChildRow(event:any, trade: Object){
      var tableId = jQuery(event.target).closest('table')[0].id;
      var table = jQuery('#' + tableId).DataTable();
      var tr = jQuery(event.target).closest('tr');
      var row = table.row( tr );

      if ( row.child.isShown() ) {
          // This row is already open - close it
          jQuery('div.slider', row.child()).slideUp( function () {
            row.child.hide();
            tr.removeClass('shown');
          } );
      }
      else {
          // Open this row
          this.myService.callSomeMethod("aaaa", "01-Jan-2015", "01-Jan-2017")
                          .subscribe(
                            data => this.format(data, row, tr),
                            error =>  this.errorMessage = <any>error
                          )

      }
    }

    //Show child when row clicked
    format ( data, row, tr ) {
      var childRow = '<div class="slider col-xs-12">'+
                        '<div #parent></div>';

      row.child(childRow).show();
      tr.addClass('shown');
      jQuery('div.slider', row.child()).slideDown();

      this.parent.createComponent(this.childComponent, 0);
     component.instance.data= data;
    }

}

在将它注入DOM后，如何重新读取ViewContainerRef

0 个答案: