Question

Angular 2 - 如何使关键字和描述的index.html文件标题和元标记动态化。

我正在使用带有角度2的打字稿。

我的代码示例：

<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>title needs to be dynamic</title>
    <base href="/"></base>

    <meta charset="UTF-8">
    <meta name="fragment" content="!"/>
    <meta name="description" content="description needs to be dynamic"/>
    <meta name="keywords" content="keywords needs to be dynamic" />

这是我的路线：

{ path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},

我试过这个但是没有用：

 <title>{{title}}</title>

Answer 1

有一项Title服务。否则你现在独自一人。您可以使用纯JS功能querySelector()...
有计划在<head>中支持更多标签我对SEO没有太深入，但我认为使用服务器端解决方案更好。我怀疑搜索引擎会选择在初始页面加载后添加的元标记。

Plunker（不更新窗口标题，因为应用在iframe中运行，但使用浏览器检查工具在<head><title>....</title></head>中显示）

Answer 2

还有@ngx-meta/core插件，它可以帮助您动态制作页面标题和元标记（在路由配置和类构造函数级别上）。

请参阅存储库以获取说明。

Angular 2 - 如何使关键字和描述的index.html文件标题和元标记动态化

2 个答案: