如何在Angular应用中嵌入LinkedIn帖子？

一、获取LinkedIn帖子的嵌入代码 #

• 打开目标LinkedIn帖子，点击右上角的三个点图标（「更多」按钮）
• 选择「嵌入帖子」选项，在弹出的窗口中复制生成的完整HTML代码，示例如下：

<script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
<script type="IN/Share" data-url="https://www.linkedin.com/posts/your-post-url-here"></script>

二、Angular项目中的实现方案 #

方案1：利用DomSanitizer处理嵌入代码 #

Angular默认会拦截未标记为安全的HTML内容，因此需要使用DomSanitizer绕过安全检查：

1. 在组件中导入依赖：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

2. 注入DomSanitizer并处理嵌入代码：

export class LinkedInPostComponent implements OnInit {
  safePostHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 替换为你复制的LinkedIn嵌入代码
    const rawEmbedCode = `
      <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
      <script type="IN/Share" data-url="https://www.linkedin.com/posts/your-post-url-here"></script>
    `;
    this.safePostHtml = this.sanitizer.bypassSecurityTrustHtml(rawEmbedCode);
  }
}

3. 在组件模板中渲染安全HTML：

<div [innerHTML]="safePostHtml"></div>

方案2：动态加载脚本（推荐，避免innerHTML脚本执行问题） #

部分情况下innerHTML绑定不会自动执行插入的脚本，此时可以手动创建并加载脚本：

1. 在组件的ngOnInit中添加脚本加载逻辑：

ngOnInit(): void {
  // 检查LinkedIn平台脚本是否已加载，避免重复加载
  if (!document.querySelector('script[src="https://platform.linkedin.com/in.js"]')) {
    const platformScript = document.createElement('script');
    platformScript.src = 'https://platform.linkedin.com/in.js';
    platformScript.type = 'text/javascript';
    platformScript.text = 'lang: en_US';
    document.body.appendChild(platformScript);
  }

  // 创建并加载帖子嵌入脚本
  const postScript = document.createElement('script');
  postScript.type = 'IN/Share';
  postScript.setAttribute('data-url', 'https://www.linkedin.com/posts/your-post-url-here');
  document.body.appendChild(postScript);
}

2. 模板中无需额外代码，脚本会自动在页面中渲染帖子内容。

三、注意事项与问题排查 #

• 隐私设置检查：确保目标LinkedIn帖子设置为「公开」，否则嵌入后无法正常显示
• 内容安全策略（CSP）配置：如果浏览器报CSP错误，在src/index.html中添加允许的脚本源：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://platform.linkedin.com;">

• 重复脚本处理：动态加载时一定要加脚本存在性判断，避免多次加载导致的异常

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