Ionic 5 / Angular 8 在外部单击时切换 div

Question

我有一个带有 4 个单选按钮的设置屏幕。如果我点击任何一个单选按钮，应该显示一条成功消息，如果我点击其他任何地方，该消息应该被隐藏。

代码如下：

settings.component.html:

<ion-content>
  <div class="flex-container">
    <ion-card>
      <div class="message">
        <div class="message-inner" *ngIf="isMessageDisplay">
          <ion-icon name="checkmark"></ion-icon>
          <p>Success message</p>
        </div>
      </div>
      <div class="home-screen">
        <ion-card-header>
          <ion-card-title class="ion-text-center">Select the home page to display</ion-card-title>
        </ion-card-header>
      
        <ion-card-content class="home-screen-buttons">
       

          <ion-list class="radio-buttons">
            <ion-radio-group name="homeButtons"
            >
              <ion-row>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label>home 1</ion-label>
                    <ion-radio [value]="home.home1"
                    (ionSelect)="home1()"
                    color="secondary"
                    ></ion-radio>
                  </ion-item>
                </ion-col>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label color="lightgray">home 2</ion-label>
                    <ion-radio [value]="home.home2"
                    (ionSelect)="home2()"
                    color="secondary"
                    ></ion-radio>
                  </ion-item>
                </ion-col>
  
  
              </ion-row>
            </ion-radio-group>
          </ion-list>

        </ion-card-content>
      </div>

      <div class="products">
        <ion-card-header>
          <ion-card-title class="ion-text-center">Select the product to display</ion-card-title>
        </ion-card-header>
  
        <ion-card-content class="products-buttons">

          <ion-list class="radio-buttons">
            <ion-radio-group name="productButtons">
              <ion-row>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label>Product 1</ion-label>
                    <ion-radio [value]="product.product1"
                    (ionSelect)="product1()"
                    color="secondary"></ion-radio>
                  </ion-item>
                </ion-col>
                <ion-col size="6">
                  <ion-item lines="none">
                    <ion-label color="lightgray">Product 2</ion-label>
                    <ion-radio [value]="product.product2"
                    (ionSelect)="product2()"
                    color="secondary"></ion-radio>
                  </ion-item>
                </ion-col>
              </ion-row>
            </ion-radio-group>
          </ion-list>

        </ion-card-content>
      </div>

    </ion-card>
  </div>
</ion-content>

settings.component.ts:

import { Component, ElementRef, HostListener, OnDestroy, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-settings-menu',
  templateUrl: './settings-menu.page.html',
  styleUrls: ['./settings-menu.page.scss'],
})

export class SettingsMenuPage implements OnInit, OnDestroy {

  isMessageDisplay: boolean = false;
        
  subscriptions$: Subscription[] = [];

  constructor(
    private store: Store<any>,
    private elemRef: ElementRef
  ) {
 
   }

   ngOnInit() {
   }

   @HostListener('document:click', ['$event.target'])
   onClickOutside(targetElement) {
     const target = this.elemRef.nativeElement.querySelector('ion-radio');
     if (targetElement.tagName != target.tagName)
      this.isMessageDisplay= false;
   }

  home1() {
    // some other logic
    this.isMessageDisplay= true;
  }

  home2() {
    // some other logic
    this.isMessageDisplay= true;
  }

  product1() {
   // some other logic
    this.isMessageDisplay= true;
  }

  product2() {
    // some other logic
    this.isMessageDisplay = true;
  }


   ngOnDestroy() {
    this.subscriptions$.forEach(subscription => subscription.unsubscribe());
  }
}

当我运行 ionic serve 命令时，上面的代码在开发过程中很好地完成了任务。但是，一旦我使用 ionic cordova build browser --prod --release 为浏览器构建代码并将其部署到某个服务器中，那么 success message 不会立即切换，当我点击屏幕上的其他任何地方时会花费很多时间。

请帮忙！

Answer 1

问题出在 HostListener 中。我没有使用 @HostListener('document:click', ['$event.target'])，而是使用了 @HostListener('click', ['$event.target']) 并删除了 document。这解决了我在制作过程中遇到的问题。我不知道发生这种情况的确切原因。

Ionic 5 / Angular 8 在外部单击时切换 div

Ionic 5 / Angular 8 toggle a div on clicking outside

javascript

angular

typescript

angular8

ionic5