离子4-从页面添加/删除按钮的最简单方法

Question

我正在使用页面变量从页面中添加/删除组件。

这听起来很奇怪，但实际上有效。

mypage.html

<pop-product *ngIf="this.pop_product_open" [data]="this.pop_product_data"></pop-product>

mypage.ts

public pop_product_open:boolean = false;
public pop_product_data:any = null;

...

async openPopProduct(product){
  this.pop_product_open = true;
  this.pop_product_data = product;
}

还有其他/最简单/更好的方法来添加/删除页面中的组件吗？

我问是因为我将要有大约15个组件，这令人恐惧的是，这种方式管理大量变量的代码有多混乱。

Answer 1

例如，如果有两个以上的页面，则可以使用类似的内容。

首先，您需要具有一个功能来选择要显示的组件。

example.ts

selectedPage: string = 'DefaultPage';

exampleFunction(page){
  this.selectedPage = page;
}

然后将显示该组件。默认情况下，如果特定组件尚不存在，则可以显示一些示例数据（!selectedPage）。

exapmle.html

<ion-content>
    <map *ngIf="selectedPage == 'Map'"></map>
    <offers *ngIf="selectedPage == 'Offers'"></offers>
    <restaurants *ngIf="selectedPage == 'Eat'"></restaurants>
    <emergencies *ngIf="selectedPage == 'Emergencies'"></emergencies>
    <drink *ngIf="selectedPage == 'Drink'"></drink>
    <spa *ngIf="selectedPage == 'Spa'"></spa>
    <attractions *ngIf="selectedPage == 'Attractions'"></attractions>
    <beaches *ngIf="selectedPage == 'Beaches'"></beaches>
    <ion-row *ngIf="!selectedPage || selectedPage == 'DefaultPage'">
...