我正在尝试向我无法直接控制的基于 Angular 的应用程序中的元素动态添加“帮助”按钮。 一旦在页面上呈现，该按钮应该出现在具有 .submitanduserinfo 类的容器中。这是我正在使用的代码：
<!DOCTYPE html>
<html lang="ja-EN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Community</title>
<style>
.help-button {
margin: 10px 0;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
.help-button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<header>
<h1>Welcome to Community</h1>
</header>
<main>
<p>This is a community</p>
</main>
<script>
function addHelpButton() {
console.log('addHelpButton function is called');
function insertHelpButton(submitContainer) {
if (submitContainer.querySelector('.help-button')) return;
const helpButton = document.createElement('button');
helpButton.innerText = 'Help';
helpButton.className = 'help-button';
helpButton.addEventListener('click', () => alert("Help button clicked!"));
const submitButton = submitContainer.querySelector('.btn-primary');
if (submitButton) {
submitContainer.insertBefore(helpButton, submitButton);
} else {
console.error('Submit button (.btn-primary) not found in submitContainer');
}
}
setTimeout(() => {
const observer = new MutationObserver((mutationsList, observer) => {
const submitContainer = document.querySelector('.submitanduserinfo');
if (submitContainer) {
insertHelpButton(submitContainer);
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}, 5000);
}
window.addEventListener('DOMContentLoaded', addHelpButton);
</script>
</body>
</html>
问题：该代码仅在页面完全呈现后在浏览器控制台中运行时才有效。当包含在 HTML 中时，MutationObserver 似乎没有检测到 .submitanduserinfo，并且按钮没有出现。
迄今为止的尝试：
超时延迟：我尝试添加延迟（当前为 5 秒），但计时不起作用，因为 Angular 的渲染可能会有所不同。
MutationObserver：即使使用 subtree: true，观察者有时在最终加载时也不会检测到 .submitanduserinfo 元素。
使用 setInterval 进行轮询：轮询不起作用，感觉效率低下，有时会导致重复按钮。
问题：当我无法修改 Angular 代码时，可靠地添加此按钮的最佳方法是什么？是否有更有效或更可靠的方法可以处理 Angular 应用程序中动态加载的元素？
将脚本放在 Angular 代码之前，并立即运行观察者，以便它跟踪 Angular 添加的元素。
然后，通过检查其类列表来检查您的元素是否已添加，然后调用您的函数（删除每个突变上的选择元素）（如果未检测到按钮，则尝试检测父组件，并检查按钮是否存在同样的方式）：
const { target:submitContainer } = mutationsList;
if (submitContainer.classList.contains('submitanduserinfo')) {
试试这个：
<!-- place before angular code -->
<script>
console.log('addHelpButton function is called');
function insertHelpButton(submitContainer) {
if (submitContainer.querySelector('.help-button')) return;
const helpButton = document.createElement('button');
helpButton.innerText = 'Help';
helpButton.className = 'help-button';
helpButton.addEventListener('click', () => alert("Help button clicked!"));
const submitButton = submitContainer.querySelector('.btn-primary');
if (submitButton) {
submitContainer.insertBefore(helpButton, submitButton);
} else {
console.error('Submit button (.btn-primary) not found in submitContainer');
}
}
// run observer right away
const observer = new MutationObserver((mutationsList, observer) => {
const { target:submitContainer } = mutationsList;
if (submitContainer.classList.contains('submitanduserinfo')) {
insertHelpButton(submitContainer);
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
</script>