客户端异步。带有服务器端渲染的请求

Question

我想我会使用 Angular4 / Node.js 对 SEO 进行一些实验，但遇到了一个挑战。

Angular Universal 让我可以进行服务器端渲染，这样我就可以在我的页面进入浏览器之前将我的元关键字、标题、图像 url 等注入 HTML - -伟大的！现在的挑战是，在某些时候，我希望至少能够在客户端异步地做 some 事情，例如。 GET-ting 一些 JSON 数据，甚至捕获 Angular click-event.

在使用下面的示例时，我似乎无法做那种事情。

home.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';

@Component({
  selector: 'home',
  template: `<button (click)="fetch();">Fetch some json</button>`,
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(
    private _http: Http
  ) {}

  ngOnInit() {}

  public fetch(){
    console.log("Clicked");             // Does not happen

    this._http.get('./i18n/da.json')
    .subscribe((r: Response) => {
      console.debug(r.json());          // Also not happening
    });
  }
}

当服务器端使用 Universal 渲染时，有没有办法实现这样的事情？你们会如何实施这个？

干杯！

Answer 1

我不太确定你的意图是什么，但我认为可能是以下之一：

您想在 Angular 接管之前用户单击服务器端呈现的按钮时做一些事情吗？那么你正在寻找 Preboot.
您想在服务器端渲染时从服务器获取数据，然后在客户端使用这些数据吗？那你可能正在寻找 TransferState 补液 API.
您的应用程序有问题，它对按钮点击根本没有反应。即使使用 SSR，点击也应该开箱即用。检查您的控制台是否有错误。

客户端异步。带有服务器端渲染的请求

Client side async. requests with server side rendering

angular

universal

server-side-rendering