Angular 7中LinkedIn关注按钮无法显示的问题求助

嘿，我之前在Angular项目里集成LinkedIn组件时也踩过类似的坑，直接在模板里写script标签确实容易失效，主要是Angular的DOM安全机制和脚本加载时机的问题。下面给你一步步的解决办法：

核心思路：动态加载LinkedIn SDK + 手动初始化组件 #

Angular会对模板中的HTML进行安全清理，直接嵌入的script标签可能不会被正确执行。所以我们要在组件代码里动态加载LinkedIn的SDK，等脚本加载完成后再创建关注按钮，并手动触发初始化。

1. 创建一个专属组件（推荐） #

把LinkedIn关注按钮封装成独立组件，方便复用和维护。组件代码如下：

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

@Component({
  selector: 'app-linkedin-follow',
  template: '<div id="linkedin-follow-container"></div>'
})
export class LinkedinFollowComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // 组件视图渲染完成后加载SDK
    this.loadLinkedInScript();
  }

  private loadLinkedInScript(): void {
    // 避免重复加载SDK脚本
    const existingScript = document.getElementById('linkedin-sdk');
    if (!existingScript) {
      const script = document.createElement('script');
      script.id = 'linkedin-sdk';
      script.type = 'text/javascript';
      script.src = 'https://platform.linkedin.com/in.js';
      // 设置语言配置
      script.text = `lang: en_US`;
      // 脚本加载完成后创建关注按钮
      script.onload = () => this.createFollowButton();
      document.body.appendChild(script);
    } else {
      // 脚本已存在，直接创建按钮
      this.createFollowButton();
    }
  }

  private createFollowButton(): void {
    const container = document.getElementById('linkedin-follow-container');
    if (!container) return;

    // 创建关注按钮的脚本元素
    const followButtonScript = document.createElement('script');
    followButtonScript.type = 'IN/FollowCompany';
    followButtonScript.setAttribute('data-id', '1337');
    followButtonScript.setAttribute('data-counter', 'bottom');
    
    container.appendChild(followButtonScript);
    
    // 手动触发LinkedIn组件解析，确保按钮渲染
    // @ts-ignore 忽略TypeScript对全局IN变量的类型检查
    IN.parse(container);
  }
}

2. 在需要的地方使用组件 #

比如在你的页面模板里直接用：

<app-linkedin-follow></app-linkedin-follow>

3. 注意事项 #

• 内容安全策略（CSP）：如果你的项目配置了CSP，需要允许加载https://platform.linkedin.com的资源。可以在index.html的meta标签里添加：

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

• SSR适配：如果使用服务端渲染（比如Angular Universal），需要确保代码只在浏览器端执行。可以导入isPlatformBrowser并判断：

  import { Component, AfterViewInit, Inject, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  
  // 在构造函数注入PLATFORM_ID
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  
  ngAfterViewInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.loadLinkedInScript();
    }
  }
  

这样操作后，LinkedIn关注按钮应该就能正常显示了。原理就是确保SDK脚本加载完成后再初始化组件，绕过Angular的模板安全限制~

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