如何在一个组件离子2中隐藏显示不同的组件

Question

我有一个名为 HomeComponent 的组件。因为我需要根据条件显示多个组件。

我的功能在一个页面中调用不同的页面，进入 Home 组件。我正在使用 *ngIf 来显示隐藏 div（我当前的逻辑是否在我的大脑中运行 :-( ）。这样我就遇到了一个问题。当我点击 component mars 时，我必须显示组成冥王星，所以一个。

home.component.html

    <ion-home>
         <ion-content *ngIf="mars==true">
            <component-mars>
               //consider this as the code inside the component plz
                 <button (click)="gotoPluto()">component mars</button>
            </component-mars>
         </ion-content>

         <ion-content *ngIf="pluto==false">
           <component-pluto>
                 //consider this as the code inside the component plz
                 <button (click)="gotoEarth()">component mars</button>
           </component-pluto>
         </ion-content>
      </ion-home>

mars.component.ts

     gotoPluto(){

        mars= false; // so the mars should hide
        pluto=false; //so the pluto will hide and show earth
       }

我的家庭组件如何检测到这一点。我尝试使用 ion-tabs navController 但它有 tab-bar 。我已经在指定组件中有我的按钮。

Answer 1

我不熟悉 Ionic 框架，因此这可能需要调整（未经测试），但可能会让您了解如何使用 ngSwitch 来解决这个问题。

主页组件模板

1. 你可以调整你的模板，在<ion-home>标签上添加ngSwitch，传入变量来开启。在这种情况下，我们打开currentPlanet。
2. 然后您将在<ion-content> 标记上添加ngSwitchWhen，并传入一个字符串值。字符串值应该是您希望当前星球的值，以便显示该内容。所以当currentPlanet = 'mars' 时，元素<ion-content *ngSwitchWhen="'mars'"> 就会显示出来。
3. 在行星组件标签上添加点击事件，调用home.component.ts 中的nextPlanet(string) 函数，传入下一个要前往的行星的字符串值。

---

<ion-home [ngSwitch]="currentPlanet">
  <ion-content *ngSwitchWhen="'mars'">
    <component-mars 
        (click)="nextPlanet('pluto')">
    </component-mars>
  </ion-content>
  <ion-content *ngSwitchWhen="'pluto'>
    <component-pluto 
        (click)="nextPlanet('earth')">
    </component-pluto>
  </ion-content>
</ion-home>

主页组件打字稿文件

然后，您将在 home.component.ts 组件中拥有您的 nextPlanet() 函数。 home 组件将根据单个变量 currentPlanet 指定要显示的行星组件。

currentPlanet: string = 'mars';

nextPlanet(planet: string){
  this.currentPlanet = planet;
}

现在当组件被点击时，它将调用主控制器中的nextPlanet()函数，传入下一个行星的字符串值。