我查看了提供的链接中的代码，注意到click事件不起作用，因为代码中有一个小问题。您正在将（click）事件添加到路径元素，但SVG元素本身并不支持Angular的事件绑定。
要使单击事件工作并在鼠标悬停时显示弹出模型，您可以执行以下步骤：
将每个路径元素 Package 在一个a（锚）标记中，并将click事件应用于该标记。
创建一个Bootstrap模型并使用Angular控制其可见性。
以下是实施这些更改的分步指南：
修改home.component.html文件，如下所示：

<svg
  version="1.0"
  id="Layer_1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="0 0 64 64"
  enable-background="new 0 0 64 64"
  XML:space="preserve"
>
  <a (click)="showPopup('North America')">
    <path
      fill="#FBBB00"
      d="M32,2C16.54,2,3.56,11.58,1.15,26h61.69C60.44,11.58,47.46,2,32,2z"
    />
  </a>
  <!-- Add anchor tags with click event for each section -->
  <!-- South America -->
  <a (click)="showPopup('South America')">
    <path
      fill="#FBBB00"
      d="M32,62c15.46,0,28.44-9.58,30.85-24H1.15C3.56,52.42,16.54,62,32,62z"
    />
  </a>
  <!-- Africa -->
  <a (click)="showPopup('Africa')">
    <path
      fill="#FBBB00"
      d="M32,2c15.46,0,28.44,9.58,30.85,24H1.15C3.56,11.58,16.54,2,32,2z"
    />
  </a>
  <!-- Europe -->
  <a (click)="showPopup('Europe')">
    <path
      fill="#FBBB00"
      d="M3.15,38h57.69C60.44,52.42,47.46,62,32,62C16.54,62,3.56,52.42,1.15,38z"
    />
  </a>
  <!-- Asia -->
  <a (click)="showPopup('Asia')">
    <path
      fill="#FBBB00"
      d="M61.85,26H3.15C5.56,11.58,18.54,2,34,2C49.46,2,62.44,11.58,64.85,26z"
    />
  </a>
  <!-- Australia -->
  <a (click)="showPopup('Australia')">
    <path
      fill="#FBBB00"
      d="M1.15,38c-0.02,0.32-0.04,0.64-0.04,0.96c0,15.46,12.58,28.44,27.04,30.85c-0.46-3.85-0.7-7.78-0.7-11.81
      c0-0.23,0.01-0.45,0.01-0.68H1.15z"
    />
  </a>
</svg>

<!-- Bootstrap Modal -->
<div
  class="modal fade"
  id="popup modal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="popupModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="popupModalLabel">{{ selectedRegion }}</h5>
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
          (click)="hidePopup()"
        >
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Add your content here for each region -->
        <!-- For example, for North America: -->
        <p>
          North America is a continent entirely within the Northern Hemisphere
          and almost all within the Western Hemisphere.
        </p>
      </div>
    </div>
  </div>
</div>

字符串
修改您的home.component.ts文件如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent {
  public selectedRegion: string = '';

  constructor() {}

  // Function to show the Bootstrap modal and set the selectedRegion value
  showPopup(region: string): void {
    this.selectedRegion = region;
    $('#popupModal').modal('show'); // Use jQuery to show the Bootstrap modal
  }

  // Function to hide the Bootstrap modal
  hidePopup(): void {
    $('#popupModal').modal('hide'); // Use jQuery to hide the Bootstrap modal
  }
}

型
如果你还没有在你的Angular项目中安装jQuery和Bootstrap。你可以通过npm安装它们
将必要的导入添加到angular.json文件中：

"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

型
现在，当您点击每个区域时，相应的模态将弹出相应的信息。此外，如果您将鼠标悬停在每个区域上，您可以显示工具提示或弹出框，其中包含更多详细信息，但这需要使用Bootstrap的工具提示或弹出框组件进行额外的实现。