弹出窗口在错误页面上打开

Question

单击标签时，我正在一个页面上创建一个弹出框。它应该在那里打开，并且在使用选项卡作为导航时工作。现在，我将标签导航从 tabmodule 更改为 app-routing.module，因为我希望标签显示在每个页面上。现在，当我单击标签（“bewertung”）打开弹出框（“rateus”）时，它不会显示在应该打开的第 5 个选项卡（“更多”）上，但是，当我导航时到第一个选项卡（“主页”），它在那里打开，我无法与之交互。

more.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController, NavController, PopoverController } from '@ionic/angular'
import { RateusPage } from 'src/app/popover/rateus/rateus.page';

@Component({
  selector: 'app-more',
  templateUrl: './more.page.html',
  styleUrls: ['./more.page.scss'],
})
export class MorePage implements OnInit {

  constructor(
    private popoverController: PopoverController,
    private modalController: ModalController
  ) { }

  ngOnInit() {
  }

  async presentPopover() {
    console.log('I got clicked')
    const popover = await this.popoverController.create({
      component: RateusPage,
    });
    popover.present();
  }
}

rateus.page.html

<ion-item>
  <ion-label>
    Bewertung
  </ion-label>
</ion-item>
<ion-content padding>
  <ion-button expand="full" (click)=rateusDismiss()>Close</ion-button>
</ion-content>

rateus.page.ts

import { Component, OnInit } from '@angular/core';
import { PopoverController } from '@ionic/angular';

@Component({
  selector: 'app-rateus',
  templateUrl: './rateus.page.html',
  styleUrls: ['./rateus.page.scss'],
})
export class RateusPage implements OnInit {

  constructor(private popoverController: PopoverController) { }

  ngOnInit() {
  }

  rateusDismiss(){
    console.log("dismiss")
    this.popoverController.dismiss();
  }
}

Answer 1

您应该将点击发生的浏览器事件添加到弹出框控制器，以便 ionic 知道在 DOM 中放置弹出框的位置。

async presentPopover(event: Event) {
    console.log('I got clicked')
    const popover = await this.popoverController.create({
      component: RateusPage,
      event: event
    });
    popover.present();
  }

在你调用函数的 HTML 中

<ion-button expand="full" (click)=presentPopover($event)>Open popover</ion-button>

Answer 2

编辑：我终于找到了问题，我的 app.component.html 看起来像这样：

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

<ion-tabs>
  <ion-tab-bar slot="bottom">
    
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="shop">
      <ion-icon name="cart"></ion-icon>
      <ion-label>Shop</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="inbox" (click)="loginrequired()">
      <ion-icon name="mail"></ion-icon>
      <ion-label>Postfach</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile" (click)="loginrequired()">
      <ion-icon name="person"></ion-icon>
      <ion-label>Profile</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="more">
      <ion-icon name="ellipsis-horizontal"></ion-icon>
      <ion-label>Mehr</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

但它必须看起来像这样：

<ion-app>

  <ion-router-outlet></ion-router-outlet>

  <ion-tabs>

    <ion-tab-bar slot="bottom">

      

      <ion-tab-button tab="home">

        <ion-icon name="home"></ion-icon>

        <ion-label>Home</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="shop">

        <ion-icon name="cart"></ion-icon>

        <ion-label>Shop</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="inbox" (click)="loginrequired()">

        <ion-icon name="mail"></ion-icon>

        <ion-label>Postfach</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="profile" (click)="loginrequired()">

        <ion-icon name="person"></ion-icon>

        <ion-label>Profile</ion-label>

      </ion-tab-button>

      <ion-tab-button tab="more">

        <ion-icon name="ellipsis-horizontal"></ion-icon>

        <ion-label>Mehr</ion-label>

      </ion-tab-button>

    </ion-tab-bar>

  </ion-tabs>

</ion-app>