问题描述：在使用Angular 12 web组件时，当多次使用同一组件时，会发现下拉菜单不断被重复追加到dom节点中，导致下拉菜单的显示出现问题。

解决方案：在打开下拉菜单之前，首先需要清除先前的已经打开的下拉菜单，可以通过在打开下拉菜单之前添加如下代码解决：

import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';

@Component({ selector: 'app-dropdown', templateUrl: './dropdown.component.html', styleUrls: ['./dropdown.component.css'] }) export class DropdownComponent implements OnInit, OnDestroy {

constructor(private elementRef: ElementRef) { }

ngOnInit(): void { // 在初始化时绑定监听事件 this.elementRef.nativeElement.addEventListener('click', this.handleClick.bind(this)); }

ngOnDestroy(): void { // 在销毁组件时移除监听事件 this.elementRef.nativeElement.removeEventListener('click', this.handleClick.bind(this)); }

handleClick(event): void { // 获取下拉菜单元素 const dropdown = this.elementRef.nativeElement.querySelector('.dropdown-menu'); // 清除已经打开的下拉菜单 document.querySelectorAll('.dropdown-menu.show').forEach((dropdownMenu) => { if (dropdown !== dropdownMenu) { dropdownMenu.classList.remove('show'); } }); // 切换下拉菜单的显示状态 dropdown.classList.toggle('show'); } }

在上述示例代码中，我们通过在组件初始化时绑定点击事件，然后在点击事件中添加了代码，通过选择器获取所有显示状态为show的下拉菜单，并通过比较判断来确保仅清除除当前菜单以外的菜单，然后切换当前下拉菜单的显示状态，避免了多次打开菜单导致重复追加的问题。