Ionic 4 - 如何动态地将组件添加到页面？

Question

我已经准备好在 HTML 中以这种方式使用我的组件：

<pop-product></pop-product>

但我需要在函数中动态添加它，比如：

async openPopProduct(){
  // append component to html body
  // add data into it
}

async closePopProduct(){
  // remove component from html
}

我该怎么做？

Answer 1

其中一个选项是使用 *ngIf。

example.html

<pop-product *ngIf="showComponent"></pop-product>

example.ts

showComponent: boolean = false;

async openPopProduct(){
  this.showComponent = true;
  // add data into it
}

async closePopProduct(){
  // remove component from HTML
  this.showComponent = false;
}

Ionic 4 - 如何动态地将组件添加到页面？

Ionic 4 - how to dynamically add component to page?

ionic-framework

angular

ionic4