Question

检查Angular Universal项目我发现他们声明了以下内容：

支持服务器上的标题和元服务（you can check that here）。

但事实是，我找不到如何在服务器上实现这一点。我检查了@angular/platform-server并且无法完善标题服务。

知道怎么做吗？

注意：我可以使用浏览器中的Title serivce使其工作。问题是服务器呈现

编辑：setTitle工作正常。问题来自于服务器中订阅的错误使用

Answer 1

是的，他们是对的，不是'@angular/platform-server'而是'@angular/platform-browser'

只需创建一个服务导入此行

import { Meta, Title } from '@angular/platform-browser';

传入构造函数，如

constructor(
    private meta : Meta, 
    private title : Title
){

现在您可以创建元标记和标题，只需创建一个类似下面的方法，并在任何地方使用它

addMetaTags(title, description) {
    //console.log(title, description);

    this.title.setTitle(title);

    this.addTag('description', description);
}
addTag(name, content) {
    //console.log(name, content);
    this.meta.addTags([{
        name: name,
        content: content
    }]);
}

您还可以通过about方法为社交媒体和其他不同类型的元数创建og：标签。例如： -

addOgTags(title, type, url, description, image, width, height){
        if(title){
            this.addPropertyTag('og:title', title);
        }
        if(description){
            this.addPropertyTag('og:description', description);
        }
        if(url){
            this.addPropertyTag('og:url', this.domain + url);
        }
        if(image){
            this.addPropertyTag('og:image', image);
            this.addPropertyTag('og:image:url', image);
        }
        if(type){
            this.addPropertyTag('og:type', type);
        }
        if(width){
            this.addPropertyTag('og:image:width', width);
        }
        if(height){
            this.addPropertyTag('og:image:height', height);
        }
    }
    addTwitterTags(card, title, description, image){
        //console.log(card, title, description, image);
        if(card){
            this.addTag('twitter:card', card);
        }
        if(title){
            this.addTag('twitter:title', title);
        }
        if(description){
            this.addTag('twitter:description', description);
        }
        if(image){
            this.addTag('twitter:image:src', image);
        }
    }

Answer 2

我认为你误解了角度普遍的作用。从您提供的屏幕截图中，您可能希望将http://localhost:4200服务器的元数据设置为“服务器端”。但是，此服务器可能是您的前端服务器，由ng服务或其他服务。

要查看元设置服务器端，您需要导航到后端通用服务器的URL（nodejs或asp.net核心）。

在示例repo here中，它是例如运行通用的服务器上的端口4000。

一旦它正常工作，在生产中你通常会在端口80上有一个代理服务器（nginx或其他），它将请求传递给你的角度通用（nodejs或asp.net核心，在端口4000或其他任何东西，不能从外部），反过来将使用正确的元

进行服务器端渲染

Angular 5上的SSR标题服务

2 个答案: