Angular 5.X如何在代码块中安全注入uid并避免被解析？

针对你的需求，我推荐自定义一个代码块指令来封装逻辑，既能安全注入uid变量，又能保证代码仅作为文本展示不被浏览器解析，同时保持代码整洁。下面是具体实现步骤：

1. 创建自定义指令处理代码渲染与变量替换 #

这个指令会负责接收代码模板和变量，完成占位符替换、HTML转义，最后安全渲染成格式化的代码块：

import { Directive, Input, OnInit, ElementRef, DomSanitizer } from '@angular/core';

@Directive({
  selector: '[appCodeBlock]'
})
export class CodeBlockDirective implements OnInit {
  // 输入：带占位符的代码模板
  @Input() codeTemplate: string;
  // 输入：需要替换的变量键值对
  @Input() variables: { [key: string]: string };

  constructor(private el: ElementRef, private sanitizer: DomSanitizer) { }

  ngOnInit() {
    let processedCode = this.codeTemplate;
    
    // 替换模板中的变量占位符（比如 {{ uid }}）
    Object.keys(this.variables).forEach(key => {
      const placeholder = `{{ ${key} }}`;
      processedCode = processedCode.replace(new RegExp(placeholder, 'g'), this.variables[key]);
    });

    // 转义HTML特殊字符，避免浏览器解析成可执行脚本
    const escapedCode = processedCode
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');

    // 用<pre><code>包裹保证代码格式，同时通过sanitizer标记为安全HTML
    const safeHtml = this.sanitizer.bypassSecurityTrustHtml(`<pre><code>${escapedCode}</code></pre>`);
    this.el.nativeElement.innerHTML = safeHtml.changingThisBreaksApplicationSecurity;
  }
}

2. 在组件中使用指令 #

组件类（定义uid变量和代码模板） #

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

@Component({
  selector: 'app-plugin-demo',
  templateUrl: './plugin-demo.component.html'
})
export class PluginDemoComponent {
  // 从控制器/服务获取的uid变量
  uid = 'your-user-unique-id';
  
  // 插件代码模板，保留{{ uid }}占位符
  pluginCode = `
<script src="https://plugin.example.io"></script>
<script>
const myBot = new Bot({{ uid }}) // 需注入Angular控制器中的uid变量
</script>
  `.trim();
}

组件模板（调用指令渲染代码） #

<!-- 传入代码模板和变量对象即可 -->
<div appCodeBlock [codeTemplate]="pluginCode" [variables]="{ uid: uid }"></div>

方案优势 #

• 代码整洁：模板与变量分离，无需在模板中拼接复杂字符串
• 安全可靠：自动转义HTML特殊字符，彻底避免脚本被浏览器执行；同时通过DomSanitizer合法绕过Angular的安全清理
• 复用性强：指令可以在任何需要展示带变量的代码块的地方复用

内容的提问来源于stack exchange，提问作者Pierre Clocher