角度不同路线的链接预览答案

【问题标题】：Link Perview for different routes in angular角度不同路线的链接预览
【发布时间】：2020-09-03 21:42:09
【问题描述】：

有人可以指导我解决角度问题吗？我有一个需要在 Angular 8 中开发的场景，对于每个不同的 URL（路由），我们需要不同的链接预览，例如我正在分享一些示例。

【问题讨论】：

请提供更多细节。从您的照片中不清楚您想要实现什么。
@SternK Angular 7/8 社交分享链接预览。我正在开发一个 Angular 7 和 8 应用程序，它具有根据不同标准生成不同反馈表单链接的功能。所以它可以有数百个链接生成我想做的是使所有这些链接在社交共享方面变得丰富，即每个链接如果粘贴在社交媒体（如 facebook）上，它应该能够具有特定于该表单的元数据，即所有链接会有不同的表单名称和描述。将链接粘贴到 facebook、twitter 等时，应获取每个链接的特定数据。

标签： angular link-prefetch api-linkpreview

【解决方案1】：

您可以添加og 元标记以执行此任务。为了向您的站点链接添加预览，您可以将og 元标记添加到index.htlm 文件中，如下所示。这样它将根据您的数据显示预览。

<head>
    <meta property="og:title" content="this is the title" />
    <meta property="og:description" content="this is the description" />
    <meta
      property="og:image"
      content="publicly avalibalbe url to your image"
    />
    <meta property="og:url" content="https://abc.lk/" />
    <meta property="fb:app_id" content="000001773503789" />
    <meta property="og:site_name" content="abc.com" />
<head>

将这些标签添加到 index.html 页面后，您可以使用Facebook debugger tool 来查看预览。

要为应用的不同页面设置动态预览，您可以关注这篇关于angular meta tags的文章。

【讨论】：

如果我将元标记放在 index.html 中，那么它将在我所有不同的路由页面中显示相同的预览..但我希望对元标记、标题描述、图像进行动态更改
你试过digitalocean.com/community/tutorials/angular-meta-tags的文章了吗。
不，我没有检查这篇文章。我会检查并告诉你

【解决方案2】：

您需要构建自定义模块或使用库来为每个路由生成动态元数据。考虑使用库ngMeta。

还可以查看关于 dynamically generating metadata using $routeProvider 的上一个问题。

【讨论】：