Ionic 4 - 从页面到按钮 add/remove 组件的最简单方法

Question

我将页面变量用于我页面中的 add/remove 个组件。

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

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;
}

是否有 other/simplest/better 方法从页面到 add/remove 组件？

我问是因为我将有大约 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'">
...

Ionic 4 - 从页面到按钮 add/remove 组件的最简单方法

Ionic 4 - easiest way to a button add/remove component from page

ionic-framework

angular

ionic4