Question

我目前正在忙于一个你可以设计的程序。 Web应用程序中的移动应用程序。

我的问题是如何在页面中打开我的Component-object（viewChild）？

我有一个包含PageComponents的列表，下面是类PageComponent

export class PageComponent implements OnInit {

  pageName : string;
  components: Array<BaseComponentComponent>[]

  constructor() { 
  }

  public setPageName(name: string) {
    this.pageName = name;
  }

  public getPageName() {
    return this.pageName;
  }
}

PageComponent的HTML

<p>
  {{pageName}}
</p>

到目前为止没什么特别的，但我想打开列表中单击的PageComponent。

我尝试使用ComponentFactoryResolver来完成它，但它创建了一个全新的PageComponent实例，因此没有帮助。

openPage(page: PageComponent) {
    let test = this.cfr.resolveComponentFactory(page);
    this.parent.clear();

    let componentRef = this.parent.createComponent(test);
}

是否可以显示您对页面的组件对象？

Answer 1

主机（父）视图上需要ViewChild，如下所示：

<div #page></div>

现在，您需要在组件中引用它：

@ViewChild('page', {read: ViewContainerRef}) page: ViewContainerRef;

现在您可以插入您的组件，如果它已全部设置：

this.page.insert(this.componentRef.hostView);

如何向页面添加组件 - Angular 4

1 个答案: