Angular 通用服务器端渲染，Meta 标签

Question

我将我的网站迁移到 Angular 通用 SSR，在迁移过程中我遇到了一些我认为 ng-universal 可以解决的问题。

我想添加元标记，例如描述、关键字等（每个页面都不同）。

使用 angular 建议的titleService效果很好，它更改了页面的标题。 但是，如果我登陆主页然后从那里导航到其他页面，标题不会改变，但是当我查看源代码时，我看到源代码发生了变化，但在 VIEW 选项卡上没有。 如果我登陆页面（或点击刷新），页面将更新为正确的标题。

我试图添加额外的标题元标记，但没有任何效果：

this.meta.updateTag( {name: "description", content: 'test1234});

this.meta.addTag({name: 'description', content: 'Content description' });

或者

using vanilaJS
 var doc = (<HTMLMetaElement>document.getElementById('description'));
doc.content = "test1234";

元在标题部分没有改变。 我不知道为什么。 任何帮助都可以提供帮助..谢谢

Answer 1

要为 Angular Universal-SSR 设置元标记（仅在 Angular 2 上尝试过），您应该使用 Renderer。 要设置例如标题（或更新它），您可以通过以下方式进行：解决方案链接

要设置meta标签，您需要： 1.Import Renderer and Document

import { Renderer } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

2.将这些依赖项添加到构造函数中：

@Inject(DOCUMENT) private document: any,
private renderer: Renderer

3.添加元标记-example

//-- Create new meta element inside of head tag
let elem = renderer.createElement(document.head, "meta");

//-- Set meta attributes
renderer.setElementAttribute(elem, 'name', 'description');
renderer.setElementAttribute(elem, 'content', 'Some test decription');

4. 当您打开“查看页面源代码”时，它应该在 head 标签内得到如下结果：

   <元名称=“描述”内容=“一些测试描述”>