在单页应用程序中操作 JavaScript 中的 dom 内容

Question

我需要在 Angular 中的组件标签后面附加包含 p 和 h3 的 div 元素

<product-list >

放入里面时

window.onLoad()

仅在重新加载和刷新时有效 这种方法不用于单页应用程序 怎么能做到呢？

我没有ts和html的访问权限，我只能添加自定义脚本

我希望导航到产品列表时会显示标签

Answer 1

使用突变观察器来跟踪组件何时添加到主体。

观察

document

，当添加一个元素时，通过标签名称检查它是否是你需要的，然后做你的事情。

确保您有准确的标签名称，并在之前角度插入/运行此脚本：

<!-- place before angular code -->
<script>

  // use exact component's `selector` value
  const tagName = 'app-about';

  const observer = new MutationObserver( (mutations) => {
    mutations.forEach((el) => {
            // get tag name and see if it's the one      
      if (el.addedNodes?.item(0)?.tagName?.toLowerCase() === tagName) {
        
        // if it's one time action, disconnect observer
        //observer.disconnect();

        console.log('got it, now do your thing');
        
        // you have the elmenent here, you could do 
        // el.addedNodes?.item(0).after(document.createElement('div'));
        
        //doYourThing();

      }
    });
  });


  observer.observe(document, {
    attributes: false,
    childList: true,
    characterData: false,
    subtree: true,
  });

</script>

<app-root></app-root>