Question

我尝试按照this链接将google plus评论框整合到我的MEAN 2.0网站中。我按照angular2方式配置了一些东西，但不确定这是否是正确的方法。请指导我整合它，因为我没有在互联网上找到这么多的帮助。

的index.html 添加到index.html的链接

   <script src="https://apis.google.com/js/plusone.js"></script>

app.ts

declare let gapi:any;
@Component({
  selector: 'blogComment',
  template: `
    <div class="g-commentcount" data-href="blog/"></div>
    <div id="{{commentId}}"></div>
  `
})
export class CommentComponent /*implements OnInit */{

  commentId : string = "comments";
  constructor() {
    console.log("CommentComponent const");
    this.embedComment();
  }

  /*ngOnInit(){

  }*/

  embedComment() {
    gapi.comments.render(this.commentId, {
        href: window.location,
        width: '624',
        first_party_property: 'BLOGGER',
        view_type: 'FILTERED_POSTMOD'
    });
  }
}

以下是同一 app.ts 文件中的另一个组件，该组件映射到＆＃34; blc＆＃34;路由器

@Component({
  providers: [CommentComponent],
  template : `
    <blogComment></blogComment>
  `
})
export class BlogComponent{
  constructor(public comment: CommentComponent) {
    console.log("BlogComponent const");
  }
} 

Router configuration
const appRoutes: Routes = [
  ...
  { path: 'blc', component: BlogComponent },
 ];

const appRoutingProviders: any[] = [

];

const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

最后包含 NgModule 中的所有内容，如下所示。

let declarationArr : Array<any>= [ 
                     BlogHomeComponent, ckeditorClass, AuthApp, 
                     BlogNotFoundComponent, BlogComponent, BlogListComponent,
                     NewBlogComponent, CommentComponent 
                 ];
@NgModule({
  imports:      [ BrowserModule, HttpModule, CKEditorModule, FormsModule, routing ],
  declarations: declarationArr,
  providers:    [ appRoutingProviders ],
  bootstrap:    [ BlogHomeComponent ]
})
export class app{}

const platform = platformBrowserDynamic();
platform.bootstrapModule(app);

但评论框根本没有加载到浏览器中。

更新

我使用普通的html和js尝试了同样的方法。它在UI中正确显示，带有警告::

'//@ sourceURL' and '//@ sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.
cb=gapi.loaded_1:1 

'//@ sourceURL' and '//@ sourceMappingURL' are deprecated, please use '//# sourceURL=' and '//# sourceMappingURL=' instead.

当尝试发表评论时，在控制台中会抛出错误。

cb=gapi.loaded_1:138 POST https://apis.google.com/u/0/wm/1/_/sharebox/linkpreview/?soc-app=103&cid=0&soc-platform=1&hl=en&f.sid=712313642&_reqid=253999&rt=j 400 ()

当试图分享它在UI中抛出错误说:: ＆＃34;出了点问题＆＃34;

[注意] ：我在localhost。这是根本原因吗？如果托管会得到解决吗？

谷歌加评论框与Angular2应用程序集成

0 个答案: