Question

我在页面中有一个菜单列表，在点击列表时，我想在当前页面的标签内推送新页面。

有人可以帮助我，我是离子的新手

Answer 1

您需要利用专为此类用例设计的Ionic组件。根据您的说明，您需要细分：https://ionicframework.com/docs/components/#segment

你使用它的方式（参见他们的例子）：

首先定义＆＃34;菜单＆＃34;

<div padding>
  <ion-segment [(ngModel)]="pet">
    <ion-segment-button value="kittens">
      Kittens
    </ion-segment-button>
    <ion-segment-button value="puppies">
      Puppies
    </ion-segment-button>
  </ion-segment>
</div>

请注意ngModel中的“pet”是组件ts文件中的变量，通常具有默认选择值，例如：public pet：string =“puppies”

然后您可以定义每个细分的内容：

<div [ngSwitch]="pet">
  <ion-list *ngSwitchCase="'puppies'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-puppy-1.jpg">
      </ion-thumbnail>
      <h2>Ruby</h2>
    </ion-item>
    ...
  </ion-list>

  <ion-list *ngSwitchCase="'kittens'">
    <ion-item>
      <ion-thumbnail item-start>
        <img src="img/thumbnail-kitten-1.jpg">
      </ion-thumbnail>
      <h2>Luna</h2>
    </ion-item>
    ...
  </ion-list>
</div>

现在每当用户从菜单中选择一个片段时 - 只会显示该内容。如果在您的情况下您需要自定义内容 - 执行此操作，您不必使用列表等：

<div [ngSwitch]="pet">
  <div *ngSwitchCase="'puppies'">
    ...
  </div>

  <div *ngSwitchCase="'kittens'">
    ...
  </div>
</div>

尝试这种方法。

最好不要发明一个新的轮子并遵循框架给你的框架。

如何将新页面推入离子中的当前页面的<div>

1 个答案: