Angular中基于布尔条件的ngIf使用及谷歌地图按钮切换问题

我来帮你梳理下问题出在哪，以及对应的解决办法：

1. 先看逻辑层面的小问题 #

你定义了close_btn变量，但第二个按钮的*ngIf绑定的是!open_btn，完全没用到close_btn，属于逻辑冗余。其实只需要一个open_btn变量就能控制两个按钮的切换状态。

2. 核心问题：Google Map控件与Angular *ngIf的DOM冲突 #

这才是导致你无法看到预期效果的关键！当你把按钮通过push()添加到Google Map的控件列表后，*ngIf会在条件不满足时直接销毁DOM元素，条件满足时再重新创建新的DOM元素：

• 初始状态下，第一个按钮被push到Map的TOP_LEFT控件区，正常显示；
• 点击按钮后，open_btn变为false，第一个按钮被销毁，第二个按钮被创建，但这个新创建的按钮并没有被添加到Map的TOP_CENTER控件区，它只会停留在原来的DOM位置（大概率被Map覆盖，所以你看不到）。

解决方案一：用[hidden]替代*ngIf（推荐，最简单） #

[hidden]只是隐藏元素，不会销毁DOM，所以按钮元素会一直存在于Map的控件列表中，只需要切换隐藏状态即可：

模板代码修改： #

<!-- 第一个按钮：open_btn为true时显示 -->
<button mat-mini-fab class="shadow bg-light" style="margin-top: 10px !important;" 
        [hidden]="!open_btn" id="open" (click)="openbtn()">
  <mat-icon>menu</mat-icon>
</button>

<!-- 第二个按钮：open_btn为false时显示 -->
<button mat-mini-fab class="shadow bg-info" style="margin-top: 10px !important; margin-left: 30px;" 
        [hidden]="open_btn" id="Settings" (click)="openbtn()">
  <mat-icon class="text-white">4k</mat-icon>
</button>

组件逻辑修改： #

map: any;
open_btn: boolean = true; // 初始显示第一个按钮

mapReady(event: any) {
  this.map = event;
  // 一次性把两个按钮添加到对应控件位置
  this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('open'));
  this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('Settings'));
}

openbtn(){
  // 直接切换open_btn的布尔值即可
  this.open_btn = !this.open_btn;
}

解决方案二：坚持用*ngIf（适合需要销毁组件节省资源的场景） #

如果必须用*ngIf，需要在每次*ngIf创建新元素后，重新把按钮添加到Map的控件列表中。我们可以用Angular的ViewChild获取元素，并在视图更新后同步Map控件：

模板代码修改： #

<!-- 用#标记元素，方便ViewChild获取 -->
<button #openBtn mat-mini-fab class="shadow bg-light" style="margin-top: 10px !important;" 
        *ngIf="open_btn" (click)="openbtn()">
  <mat-icon>menu</mat-icon>
</button>

<button #settingsBtn mat-mini-fab class="shadow bg-info" style="margin-top: 10px !important; margin-left: 30px;" 
        *ngIf="!open_btn" (click)="openbtn()">
  <mat-icon class="text-white">4k</mat-icon>
</button>

组件逻辑修改： #

import { Component, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';

// ...其他必要导入

@Component({
  // 你的组件元数据
})
export class YourMapComponent implements AfterViewChecked {
  map: any;
  open_btn: boolean = true;

  // 通过ViewChild获取按钮元素
  @ViewChild('openBtn') openBtn!: ElementRef;
  @ViewChild('settingsBtn') settingsBtn!: ElementRef;

  mapReady(event: any) {
    this.map = event;
    this.updateMapControls();
  }

  openbtn(){
    this.open_btn = !this.open_btn;
  }

  // 同步Map控件的方法
  updateMapControls() {
    if(!this.map) return;

    // 先清空对应位置的控件，避免重复添加
    this.map.controls[google.maps.ControlPosition.TOP_LEFT].clear();
    this.map.controls[google.maps.ControlPosition.TOP_CENTER].clear();

    // 根据open_btn状态添加对应按钮
    if(this.open_btn && this.openBtn?.nativeElement) {
      this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(this.openBtn.nativeElement);
    } else if(!this.open_btn && this.settingsBtn?.nativeElement) {
      this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(this.settingsBtn.nativeElement);
    }
  }

  // 每次视图更新（比如*ngIf切换后）自动同步控件
  ngAfterViewChecked() {
    this.updateMapControls();
  }
}

内容的提问来源于stack exchange，提问作者kumkum kumkum