Ionic 7模态在第二次点击时不起作用

我正在从选项卡按钮打开一个模态。我第一次点击按钮时它工作得很好,但之后它就再也不工作了。在我第一次点击它之后,我在控制台中得到以下警告。

在DOM中找不到ID为“open modal”的触发器元素。 当“trigger”属性为时,触发器元素必须在DOM中 设置在覆盖组件上。

html:

<ion-modal trigger="open-modal" > 
        <ng-template>
        <ion-header>
          <ion-toolbar>
            <ion-buttons slot="start">
              <ion-button (click)="closeModal()">Close</ion-button>
            </ion-buttons>
            <ion-title>Privacy Policy</ion-title> 
          </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding">
          <ion-item> 
          </ion-item>
        </ion-content> 
    </ng-template>
    </ion-modal>



 <ion-tabs>
        <ion-tab-bar slot="bottom">
          <ion-tab-button  >
            <ion-icon name="chatbubbles"></ion-icon>
            <ion-label>Contact Us</ion-label>
          </ion-tab-button>
          <ion-tab-button  >
            <ion-icon name="trash-bin"></ion-icon>
            <ion-label>Delete Your Account</ion-label>
          </ion-tab-button>

          <ion-tab-button id="open-modal">
            <ion-icon name="shield-half-outline"></ion-icon>
            <ion-label>Privacy Policy</ion-label>
          </ion-tab-button> 
        </ion-tab-bar>
      </ion-tabs>

ts文件

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AlertController, IonModal, LoadingController, MenuController } from '@ionic/angular';
import { Router } from '@angular/router'; 
import { AuthenticationService } from 'src/app/system/services/authentication-service/authentication.service';
 

@Component({
    selector: 'app-login',
    templateUrl: './login.page.html',
    styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
    @ViewChild(IonModal) privacyPolicyModal: IonModal;

    credentials: FormGroup;
    constructor(
        public menu: MenuController,
        private fb: FormBuilder,
        private authService: AuthenticationService,
        private alertController: AlertController,
        private router: Router,
        private loadingController: LoadingController
    ) {}

    ngOnInit() {
        this.credentials = this.fb.group({
            username: ['', [Validators.required]],
            password: ['', [Validators.required]]
        });
    }

 
  ionViewWillEnter() { 
    this.menu.enable(false);
  }

  
  closeModal(): void{
    this.privacyPolicyModal.dismiss(null, 'cancel');        
  }

    async login() {
        const loading = await this.loadingController.create();
        await loading.present();

        this.authService.login(this.credentials.value).subscribe(
            async (res) => {
                await loading.dismiss();
                this.router.navigateByUrl('/tabs', { replaceUrl: true });
            },
            async (res) => {
                await loading.dismiss(); 
                const alert = await this.alertController.create({
                    header: 'Login failed',
                    message: res.error.error,
                    buttons: ['OK']
                });

                await alert.present();
            }
        );
    }
 
    get username() {
        return this.credentials.get('username');
    }

    get password() {
        return this.credentials.get('password');
    }

  ionViewDidLeave() { 
    this.menu.enable(true);
  }
}

我尝试过将模态html放置在不同的位置(在选项卡之前、选项卡之后等),但每次都是相同的结果。