2

我使用https://github.com/aspnet/JavaScriptServices/tree/dev/templates/Angular2Spa上的模板作为 Angular Universal SPA 的起点。它呈现 Angular 根组件，如下所示：

@{
    ViewData["Title"] = "Home Page";
}

<app asp-prerender-module="ClientApp/dist/main-server">Loading...</app>

我希望我的一些 Angular 组件能够修改 HTML 标头的内容（例如设置标题标签或添加额外的元标签）。

请记住，模板使用 Razor 来呈现页面的头部，对于如何实现这一点有什么建议吗？

我使用 Razor 处理的唯一事情是 asp-append-version 标签助手，因此将所有 HTML 呈现移动到 Angular 组件中是一种选择（前提是我有办法以某种方式维护缓存清除）。

提前致谢！

4

2 回答 2

1

在aspnetcore-angular2-universal中，他们实现了一个不错的meta.service.ts来处理诸如标题和元标记之类的头部内容。它在客户端工作得很好，但不幸的是，正如这里提到的，该服务只能在浏览器中使用：

// 直到我们可以获取整个 Html 文档（这是一个 .NET 问题，因为我们从未传递整个文档（仅根应用程序））

如果不使用 aspnet 核心并在节点上坚持使用角度通用，则可以按照此处所述完成：https ://stackoverflow.com/a/42377704/1694015

考虑到我们只需要在第一次调用时在服务器上呈现 title\meta 标签（出于社交爬虫的目的 - Angular 可以在之后的客户端导航上处理该问题），这是否是检测路径的好方法？ mvc 控制器的操作，并将标题和元数据传递ViewData给渲染的 mvc 视图并将其设置在那里？

于 2017-02-23T11:23:34.760 回答
0

您可以使用Title服务设置文档或窗口的标题。

示例实现-

import { Component } from '@angular/core';
import { Title }     from '@angular/platform-browser';

@Component({
selector: 'my-app',
template:
  `<p>
    Select a title to set on the current HTML document:
  </p>
  <ul>
    <li><a (click)="setTitle( 'Good morning!' )">Good morning</a>.</li>
    <li><a (click)="setTitle( 'Good afternoon!' )">Good afternoon</a>.</li>
    <li><a (click)="setTitle( 'Good evening!' )">Good evening</a>.</li>
  </ul>
  `
})

export class AppComponent {
  public constructor(private titleService: Title ) { }
  public setTitle( newTitle: string) {
    this.titleService.setTitle( newTitle );
  }
}

来自 Angular 文档的工作 plunker 可在此处获得

于 2017-01-02T08:10:12.363 回答