Dinamically更新社交分享的meta标签在angular4

Question

我遇到了一个问题，我想知道哪些方法更值得建议来解决它。我在角度4中使用MetaService来更新组件中的'meta'标签，这些标签将在社交媒体中共享，但是，例如，facebook sharer不会识别更新的值并在对话框共享中加载我的标签的默认值。那么，我问，解决这个问题的方法有哪些？

Answer 1

Angular是SPA（单页应用程序），这意味着客户端只会从服务器获取内容一次，然后处理到客户端不同页面的路由。

在引擎盖下，Web服务器被配置为将所有流量路由到一个包含应用程序代码的/index.html html文件。您需要的是一种基于初始请求url提供不同元标记的方法。我知道的有两个选项：

使用服务器端呈现

使用服务器端渲染，角会为每个使您可以设置特定的meta标签为每个路由以及路由静态页面。

见this tutorial在转换应用程序中使用服务器端渲染

使用Node.js的，快速& EJS到元数据注入index.html的

使用ejs library与Express可以动态地注入元标记到您的index.html

使用ejs，您将您的index.html重命名为index.ejs并将其配置为包含变量

<title> 
<%=title%> 
</title> 
<meta itemprop="description" content="<%=description%>"> 

配置Express使用EJS提供基于请求的URL不同的元数据

router.get('/pageOne', function(req, res, next) { 

var metaData = { 
     title: 'Page One', 
     descriptio: 'This is page one' 
    }; 

res.render('index.ejs', metaData); 
}); 

router.get('/pageTwo', function(req, res, next) { 

var metaData = { 
     title: 'Page two', 
     descriptio: 'This is page two' 
    }; 

res.render('index.ejs', metaData); 
});