如何解决在单击事件的单个组件上更新角度元标记/数据两次
我有一个场景,其中产品列表和产品详细信息视图位于同一组件上。在页面加载时,我会显示产品列表,点击产品时,我会隐藏产品列表并使用 *ngIf 显示产品详细信息视图。
现在我想为两个视图设置 Meta 标签。
在页面加载时,我正在为具有通用详细信息的产品列表设置元标记:
ngOnInit(): void {
if(!this.route.snapshot.queryParams['productId']){
this.utils.updateMetaTags('Harvesting farmer network - buy direct from farmer','Helping farmers in India sell their crops!',this.route.url,'assets/images/logo.svg');
}
}
现在,一旦用户点击产品列表中的产品,我想用产品详细信息更新元数据。
getFeedById(){
this.utils.updateMetaTags(this.title,this.singleItemFeed?.description || 'Helping farmers in India sell their crops!',this.router.url,this.singleItemFeed.images[0]?.url);
}
结果:我可以设置初始通用元,但元不会为产品更新。
要点: 角度版本:11.0.2, Angular 通用实现
是否可以在不重新加载页面的情况下针对点击等事件多次更新组件的元数据?
解决方法
您可以使用订阅查询参数更改:
this.route.queryParams.subscribe(params => {
console.log(params.productId);
})
因为当查询参数改变时,组件不会重新加载。如果使用 this.route.snapshot.queryParams['productId']
,它只会在组件初始化时触发一次
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。