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

在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>

---

您可以使用该函数更新注释部分的页面详细信息，而无需每次都加载embed.js。也就是说，您只需按照Eric Martinez的建议添加一次脚本。

更新：最简单的方法是使用此

取消模块

，您可以从npm check安装它

如果您仍然想自己编写，这个组件将完成这项工作

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';
      };
    }
}

从'@angular/core'导入{Component，Input，ElementRef，OnInit，Renderer2}；
@组成部分({
选择器：'disqs'，
模板：“”，
})
导出类discus实现OnInit{
@Input（）公共标识符：字符串；
@Input（）public shortname:string；
构造函数（私有el:ElementRef，私有呈现器：Renderer2）{
this.dom=el.nativeElement；
}
恩戈尼尼特（）{
if（（窗口）.disqs==未定义）{
this.addScriptTag（）；
}
否则{
这是reset（）；
}
}
/**
*用新信息重置取消论文。
*/
重置（）{
（窗口）。取消自动复位({
是的，
config:this.getConfig（）
});
}
/**
*将DISKS脚本添加到文档中。
*/
addScriptTag（）{
（window.disqs_config=this.getConfig（）；
让script=this.renderer.createElement（this.el.nativeElement，'script'）；
script.src=`/${this.shortname}.discus.com/embed.js`；
script.async=true；
script.type='text/javascript'；
script.setAttribute（'data-timestamp'，new Date（）.getTime（）.toString（））；
}
/**
*获取配置文件
*/
getConfig（）{
让_self=这个；
返回函数（）{
this.page.url=window.location.href；
this.page.identifier=\u self.identifier；
this.language='en'；
};
}
}

它是用来发表评论的吗？？？如果你知道你要使用discus，为什么不把代码放在or中？你真的需要把它加载到一个组件中吗？这对我来说太完美了，因为我只想在我的一个子页面上使用disqs。谢谢。你正在为angualr2项目向dom中写入内容吗？@choopage我已经更新了答案，请使用

renderer.createElement

instead@MurhafSousli你好我看到了你的npm模块，正在看github。我有一个问题：您正在使用

Renderer2

和

global

来获得通用支持。为什么不使用

isPlatformBrowser

进行全面检查呢。在节点中，

el.nativeElement

将为空，因此脚本不会被附加，因此它不会工作，也不会以我认为的方式渲染？我经常看到这一点，但我对这一点感到困惑，因为这是对无法在服务器上呈现的内容的大量额外检查

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';
      };
    }
}