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

标签 javascript angularjs angular single-page-application

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

我正在使用 angular 2 的 typescript 。

我的标签示例:

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

最佳答案

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

Plunker (不更新窗口标题,因为应用程序在 iframe 中运行,但使用浏览器检查工具在 <head><title>....</title></head> 中显示它)

关于javascript - Angular 2 - 如何使我的 index.html 文件标题和元标签的关键字和描述动态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36666442/

相关文章:

javascript - 无法访问数组javascript的下一个元素

javascript - 使用 ajax 和 jquery 完成工作后显示 html

javascript - 按重复模式打印数组值

javascript - Angularjs/Javascript 使用上下键选择下一行

jquery-ui - angularjs和jqueryui datepicker输入框的值

javascript - 如何使用angular2-moment显示时间格式

javascript - 在函数中调用当前日期

javascript - Angular 状态的问题及解决方案

angular - 使用 Protractor 和 Angular 4 运行 E2E 测试

Angular 5 AngularFire Firebase 登录闪烁