我正在构建一个有角度的通用+角度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作为我的托管并且共享无效(它只是与我输入的默认值共享)。有趣的是,如果我在浏览器中检查元素,我会看到更新的元标记,但是如果查看页面源,我会看到我的标记的默认值而不是更新的标记。知道如何动态更新元标签吗?
更新:我认为问题来自于构造函数在调用获取元结束值的subscribe方法之前结束的事实。一旦构造函数完成,我不认为你可以改变元标记。那有什么方法吗?