需要帮助在 Angular 中实现 LinkedIn Widget

问题描述

我正在尝试将 Linkedin HCM Widget 与我的应用程序集成。我已经编写了 javascript 代码，它运行良好，但需要帮助将其转换为 Angular。

<script type="text/javascript" src="https://platform.linkedin.com/xdoor/scripts/in.js">
  api_key: <enter api key here>
  extensions: HcmWidget@https://www.linkedin.com/recruiter/widget/hcm
</script>

<script type="IN/HcmWidget"
  data-widget-type="ATS"
  data-ats-candidate-id="{your unique candidate id}"
  data-integration-context="{customer's integration context URN}"
  data-show-unlink-url="{true|false}"
  data-confirm-unlink="{true|false}"
  data-onlink="link"
  data-onunlink="unlink"  
  data-width="{Width}">
</script>

<script>
  function link(member) {
     console.log("Link callback",member);
  }
  function unlink(member) {
     console.log("Unlink callback",member);
  }
</script>

我在 javascript 版本中看到的奇怪的事情是，在加载 in.js 的脚本标记之间，它有子级，而在下一个脚本标记中，它的类型是“IN/HcmWidget”

我不知道如何将此代码转换为 Angular 在 Angular 中，我尝试使用组件实现相同的功能，但我没有从 LinkedIn 获得结果。只有 in.js 正在加载，但之后什么也没有发生。

import { Component,ElementRef,ViewChild,Input,OnInit  } from '@angular/core';

@Component({
  selector: 'jp-script',template: `<div #script style.display="none">
              {{this.inline}}
            </div>`
})
export class JpScriptComponent implements OnInit {


  ngOnInit(): void {
    //throw new Error('Method not implemented.');
  }

  @input()
  src: string;
  @input()
  type: string;
  @input()
  dataWidgetType: string;
  @input()
  dataIntegrationContext: string;
  @input()
  dataAtsContactId: string;
  @input()
  datasShowUnlinkUrl: string;
  @input()
  dataConfirmUnlin: string;
  @input()
  dataOnlink: string;
  @input()
  dataOnunlink: string;
  @input()
  dataWidth: string;
  @input()
  apiKey: string;
  @input()
  extensions: string;
  @input()
  dataConfirmUnlink: any;
  @ViewChild('script',{static: false}) script: ElementRef;

  inline: string = 'apiKey="****" extensions="HcmWidget@https://www.linkedin.com/recruiter/widget/hcm"';
  convertToScript() {
    let element = this.script.nativeElement;
    let script = document.createElement("script");
    script.type = this.type ? this.type : "text/javascript";
    if (this.src)
      script.src = this.src;
    if (element.innerHTML)
      script.innerHTML = element.innerHTML;
    if(this.extensions)
      script.setAttribute('extensions',this.extensions);
    if(this.dataWidgetType)
      script.setAttribute('data-widget-type',this.dataWidgetType);
    if(this.apiKey)
      script.setAttribute('api-key',this.apiKey);
    if(this.dataAtsContactId)
      script.setAttribute('data-ats-contact-id',this.dataAtsContactId);
    if(this.dataIntegrationContext)
      script.setAttribute('data-integration-context',this.dataIntegrationContext);
    if(this.datasShowUnlinkUrl)
      script.setAttribute('data-show-unlink-url',this.datasShowUnlinkUrl);
    if(this.dataConfirmUnlink)
      script.setAttribute('data-confirm-unlink',this.dataConfirmUnlink);
    if(this.dataOnlink)
      script.setAttribute('data-onlink',this.dataOnlink);
    if(this.dataOnunlink)
      script.setAttribute('data-onunlink',this.dataOnunlink);
    if(this.dataWidth)
      script.setAttribute('data-width',this.dataWidth);
      if (this.extensions && this.apiKey)
      this.inline = 'apiKey="****" extensions="HcmWidget@https://www.linkedin.com/recruiter/widget/hcm"'
    let parent = element.parentElement;
    parent.parentElement.replaceChild(script,parent);
    
    console.log(parent);

  }
  ngAfterViewInit() {
    this.convertToScript();
  }

}

如果有人可以帮助理解如何实现这一目标，那将非常有帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）