Angular 如何在index.html中动态添加meta标记，并将数据添加到index.html中？

我想在facebook上分享一些内容，包括标题、图片和描述。为此，我需要在index.html中动态添加元标记。我尝试了所有可能的方面，但都不起作用。在facebook上共享后，该描述、图像不会显示。 我寻找了很多解决方案，但都不适合我。有人帮我解决这个问题吗？

---

thanx提前

您可以从

@Angular/平台浏览器

使用Angular:Title和Meta提供的SEO服务

首先，您必须向路线中添加一些数据，例如：

const routes:routes=[
{
路径：“”，组件：AboutComponent，
数据：{
标题:"关于",，
元标记：{
'og:description'：'your description here`，
'twitter:description'：'your description`，
关键词：`这里是你的关键词`
}
}
}
];

然后，在app.component.ts文件的方法ngOnInit中，您将跟踪路由器事件，对于每个NavigationEnd事件（意味着到达新页面），您将根据路由中指定的数据更新标记和标题：

ngOnInit（）{
//根据路线数据更改导航页面标题
这是路由器事件
.烟斗(
过滤器（事件=>NavigationEnd的事件实例），
地图（（）=>{
让route=this.activatedRoute；
while（route.firstChild）{
route=route.firstChild；
}
返回路线；
}),
过滤器（route=>route.outlet==='primary'），
mergeMap（route=>route.data）
)
.订阅（事件=>{
常量标题=事件['title']；
如果（标题）{
const_title=`${environment.appName}|`；
this.titleService.setTitle（_title）；
this.metaService.updateTag（{name:'title'，content:_title}）；
}
常量标记=事件['metatags']；
如果（标签）{
for（标记中的常量标记）{
this.metaService.updateTag（{property:tag，content:tags[tag]}）；
}
}
});
}

但对于某些动态加载的数据，例如指定的产品，您可以在页面component product-details.component.ts中添加以下代码：

ngOnInit（）{
this.product$=this.activatedRoute.data.pipe(
switchMap（（数据）=>this.activatedRoute.paramMap.pipe(
//在url中获取请求的id以获取正确的文档
switchMap（（params）=>this.productService.getProduct（params.get（'id'）），
点击（（产品：产品）=>{
const_title=`${environment.appName}}${product.name}`；
this.titleService.setTitle（_title）；
this.metaService.updateTag（{name:'title'，content:_title}）；
this.metaService.updateTag（{name:'description'，content:product.description}）；
}),
)));
}

等等

---

但是您可能需要将Angular Universal添加到您的项目中，因为并非所有搜索机器人都可以分析Angular这样的单页应用程序。

通过元服务从任何组件动态添加更新如果没有Angular Universal，则无法工作