时间戳

首页 > 解决方案 > Ionic 4 - 从页面添加/删除按钮的最简单方法

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

问题描述

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

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

我的页面.html

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

我的页面.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 个组件，而且以这种方式管理大量变量的代码会变得多么混乱，这很可怕。

标签： angularionic-frameworkionic4

解决方案

如果有两个以上的页面，您可以使用这样的东西。

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

例子.ts

selectedPage: string = 'DefaultPage';

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

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

例子.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'">
...

推荐阅读