Angular8+中如何触发[innerHtml]绑定的API返回HTML内的POST提交逻辑

• 首先是浏览器的原生限制：通过innerHTML属性注入的<script>标签，无论内部写了什么逻辑，都永远不会被解析执行——这不是Angular单独做的拦截。Angular的[innerHtml]本质就是给DOM元素的innerHTML属性赋值，所以接口返回的自动提交脚本，从被写入DOM的那一刻起就已经失效了。
• 其次是表单属性不规范：示例代码里的表单用url属性存储提交地址，这不是HTML标准支持的表单属性，表单的提交地址标准属性是action，就算后续手动找到form节点触发提交，默认也找不到正确的请求目标。

1. 从渲染后的DOM中提取表单节点触发提交
   模板里给弹窗容器加视图引用，组件里通过ViewChild拿到容器的DOM实例，等[innerHtml]完成渲染后，从容器范围内查找目标表单：

   // 组件内部定义
   @ViewChild('exp') formContainer!: ElementRef<HTMLDivElement>;
   apiResponse = ''; // 接口返回的完整HTML字符串
   
   // 接口请求成功，把响应赋值给apiResponse绑定的变量后，调用这个方法触发提交
   autoSubmitForm() {
     // 用setTimeout把执行时机延后，等Angular完成DOM渲染后再操作
     setTimeout(() => {
       // 从容器内部查找对应名称的表单，不要用全局document查找，避免嵌套场景找不到元素
       const targetForm = this.formContainer.nativeElement.querySelector('form[name="example"]');
       if (!targetForm) return;
   
       // 兼容原HTML里写错的提交地址属性
       const submitUrl = targetForm.getAttribute('url') || targetForm.getAttribute('action');
       targetForm.action = submitUrl;
   
       // 按展示需求设置跳转打开方式
       // 需要当前弹窗层展示提交结果：保持默认target="_self"即可
       // 需要新标签页打开提交结果：把下面这行注释打开
       // targetForm.target = '_blank';
   
       // 手动触发表单POST提交
       targetForm.submit();
     }, 0);
   }
   

2. 展示效果适配
   • 要实现提交结果叠加在当前站点上层展示：保持form的target="_self"，提交后的响应会直接替换弹窗容器内的内容，不会跳出当前页面层级。
   • 要实现提交结果在新标签页打开：给form设置target="_blank"，因为整个提交动作是在你的业务交互链路中触发的，不会被浏览器的弹窗拦截器判定为恶意弹窗。
3. 执行接口返回HTML里的其他内置逻辑
   不要尝试让浏览器自动执行innerHTML注入的脚本，要在拿到接口返回的HTML字符串时，手动提取所有script标签的内容，做合法性校验后再手动执行。

   注意：直接执行来源不可信的脚本存在XSS安全风险，仅在你完全确认接口返回内容的安全性时再做这个操作。

• 不要为了让脚本执行，用DomSanitizer的bypassSecurityTrustHtml强行绕过Angular的安全检查，这么做既解决不了script不执行的问题，还会引入XSS安全漏洞。
• 跨域提交不需要额外配置：form发起的POST请求不受浏览器同源策略限制，提交后的响应会直接在指定的target窗口展示，不需要接口配置跨域响应头。
• 不要直接调用document.example.submit()这种全局DOM查找代码，因为你的渲染内容是在弹窗容器内部，全局查找在嵌套层级复杂的场景下很容易找不到元素，从容器范围内查找会稳定很多。

内容的提问来源于stack exchange，提问作者Syed Shahbaz Ulla