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

Question

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

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

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. 您可以调整模板，在传递变量的ngSwitch标记上添加<ion-home>以启用。在这种情况下，我们会启用currentPlanet。
2. 然后，您会在传递字符串值的ngSwitchWhen标记上添加<ion-content>。字符串值应该是您想要当前行星的值，以便显示该内容。因此，currentPlanet = 'mars'将显示元素<ion-content *ngSwitchWhen="'mars'">。
3. 在行星组件标记上添加一个点击事件，调用nextPlanet(string)中的home.component.ts函数，传入下一行星的字符串值。

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

主页组件手稿文件

然后，您的nextPlanet()组件中会显示home.component.ts个功能。主组件将根据单个变量currentPlanet指示要显示的行星组件。

currentPlanet: string = 'mars';

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

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