Question

我有一个客户端博客应用程序，该应用程序在加载时显示文章列表。我想从服务器加载包含该页面的动态元标记的文章数据以用于SEO。

例如：

我点击了一个链接：https://www.techstack21.com/article/function-returning-other-functions-in-javascript

我要使用查询字符串GET发出/?url=function-returning-other-functions-in-javascript请求，并从服务器向客户端渲染模板，类似于pug或jade模板引擎。

如何在角度6中做到这一点？

我不想在服务器上呈现完整的应用，而仅针对带有查询字符串的特定网址，如上面的示例

Answer 1

这对于Angular是不可能的。您只能使用[innerHTML]在模板中呈现纯HTML，但是您不能以有角度的方式来干扰它。

一个好的做法是与服务器通信（使用POST / GET请求...），该服务器将向您发送回文章的序列化“ JSON”数据。然后，您可以使用角度组件呈现从服务器收到的未序列化JSON数据。

您可能想看看REST应用程序。：）

Answer 2

您可以使用Meta Service从API更新元数据

online example

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  constructor(
    private meta: Meta,
    private http: HttpClient
  ) { }

  getMetaData$() {
    const isDevMode = true;
    if (isDevMode) {
      const mockMetas = {
        ['twitter:card']: 'summary',
        'title': 'myTitle',
        'description': 'myDesc'
      }
      return of(mockMetas);
    } else {
      return this.http.get('/?url=function-returning-other-functions-in-javascript')
    }
  }

  ngOnInit() {
    this.getMetaData$().subscribe((metas) => {
      for (const key of Object.keys(metas)) {
        this.meta.updateTag(
          { name: key, content: metas[key] },
        );
      }
    })
  }
}

如何在角度6中从服务器渲染HTML

2 个答案: