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

Question

Angular 2 - how do I make my index.html files title and meta tags for keywords and description dynamic. Angular 2 - 如何使关键字和描述的index.html文件标题和元标记动态化。

I'm using typescript with angular 2. 我正在使用带有角度2的打字稿。

Example of my tags: 我的标签示例：

<!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" />

This is my route: 这是我的路线：

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

I've tried this but it didnt work: 我试过这个，但它没有用：

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

Answer 1

There is a Title service. 有标题服务。 Otherwise you're currently on your own. 否则你现在独自一人。 You can use pure JS functionality querySelector()... 您可以使用纯JS功能querySelector()...
There are plans to support more tags in the <head> . 有计划在<head>支持更多标签。
I'm not too deep into SEO but I think it would be better to use a server side solution for meta tags. 我对SEO没有太深入，但我认为使用服务器端解决方案更好。 I doubt search engines pick up meta tags that are added after the initial page load. 我怀疑搜索引擎会选择在初始页面加载后添加的元标记。

Plunker (doesn't update the window title because the app runs in an iframe but using the browsers inspect tool shows it in the <head><title>....</title></head> ) Plunker （不更新窗口标题，因为应用程序在iframe中运行但使用浏览器检查工具在<head><title>....</title></head> ）

Answer 2

There's also the @ngx-meta/core plugin, which might help you to make page titles and meta tags dynamically (on the route config and class constructor level). 还有@ ngx-meta / core插件，可以帮助您动态制作页面标题和元标记（在路由配置和类构造函数级别）。

Please refer the repository for instructions. 请参阅存储库以获取说明。

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

问题描述

2 个解决方案

解决方案1
6 2016-04-16 16:05:42

解决方案2
2 2016-11-11 08:56:26

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

问题描述

2 个解决方案

解决方案1 6 2016-04-16 16:05:42

解决方案2 2 2016-11-11 08:56:26

解决方案1
6 2016-04-16 16:05:42

解决方案2
2 2016-11-11 08:56:26