我正在构建一个 Angular Universal + Angular 2 网站,我想添加社交媒体分享按钮。我实现了服务器端渲染,并且还使用以下代码更新了必要的元标记:
constructor(private dataService: DataService,
private activatedRoute: ActivatedRoute,
private auth: AuthService,
private router : Router,
private meta : Meta) {
this.currentUrl = window.location.href;
// testing if it changes something to add that outside of the service : it didnt
this.meta.updateTag({ property: 'og:title', content: "my new title" })
let id= this.activatedRoute.snapshot.paramMap.get('id');
this.dataService.getDataById(id).snapshotChanges().take(1)
.switchMap(result => {
console.log("slug switchmap")
let payloadValue = result[0].payload.val();
// facebook meta
this.meta.updateTag({ property: 'og:url', content: this.currentUrl })
this.meta.updateTag({ property: 'og:title', content: payloadValue.title })
this.meta.updateTag({ property: 'og:description', content: payloadValue.description })
this.meta.updateTag({ property: 'og:image', content:
payloadValue.photoUrl })
return result;
})
.subscribe(params => {
console.log(params)
});
}
我使用 firebase 作为我的托管,但共享不起作用(它只是与我输入的默认值共享)。有趣的是,如果我检查浏览器中的元素,我会看到更新的元标记,但如果查看页面源,我会看到标记的默认值而不是更新的值。知道如何动态更新元标签吗?
Update :我认为问题在于构造函数在调用获取元值的 subscribe 方法结束之前结束。一旦构造函数完成,我认为您无法更改元标记。有办法解决这个问题吗?
None
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)