Question

以下是否正确地将Disqus嵌入到Angular2组件

中

disqus.component.html

<div class="card card-block">
  <div id="disqus_thread"></div>
  <noscript>
    Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a>
  </noscript>
</div>

-

disqus.component.ts

//Above code omitted for simplicity

    export class DisqusComponent {
      ngOnInit(){
        (function() { // DON'T EDIT BELOW THIS LINE
          var d = document, s = d.createElement('script');

          s.src = '//blahblahblahdafsfawf.disqus.com/embed.js';

          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      }
    }

Answer 1

更新：最简单的方法是使用您可以从npm check Live Demo安装的DisqusModule

如果您仍然希望自己编写，则此组件将完成工作

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


@Component({
    selector: 'disqus',
    template: '<div id="disqus_thread"></div>',
})

export class Disqus implements OnInit{

    @Input() public identifier:string;
    @Input() public shortname:string;

    constructor(private el:ElementRef, private renderer:Renderer2) {
      this.dom = el.nativeElement;
    }

    ngOnInit() {
      if ((<any>window).DISQUS === undefined) {
        this.addScriptTag();
      }
      else {
        this.reset();
      }
    }

    /**
     * Reset Disqus with new information.
     */
    reset() {
      (<any>window).DISQUS.reset({
        reload: true,
        config: this.getConfig()
      });
    }

    /**
     * Add the Disqus script to the document.
     */
    addScriptTag() {
       (<any>window).disqus_config = this.getConfig();

       let script = this.renderer.createElement(this.el.nativeElement, 'script');
       script.src = `//${this.shortname}.disqus.com/embed.js`;
       script.async = true;
       script.type = 'text/javascript';
       script.setAttribute('data-timestamp', new Date().getTime().toString());
     }

    /**
     * Get Disqus config
     */
    getConfig() {
      let _self = this;
      return function () {
        this.page.url = window.location.href;
        this.page.identifier = _self.identifier;
        this.language = 'en';
      };
    }
}

Answer 2

您可以使用DISQUS.reset功能更新评论部分的页面详细信息，而无需每次都加载embed.js。那就是你可以像Eric Martinez建议的那样添加一次脚本。

这是在Angular2组件中嵌入Disqus的正确方法吗？

2 个答案: