客户端异步。 请求与服务器端渲染

我以为我会用Angular4 / Node.js做一些SEO实验，但是已经遇到了挑战。

Angular Universal可以让我做服务器端渲染，这样我就可以在我的页面访问浏览器之前将meta关键字，标题，图像url等注入到HTML中 - 非常棒！ 现在的挑战是，在某些时候，我希望至少能够在客户端上异步执行一些内容，例如。 获取一些JSON数据，甚至捕获一个Angular click事件。

在使用下面的例子时，我似乎无法做到这些。

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
    });
  }
}

有没有办法像这样的事情，当服务器端渲染使用通用？ 你们会如何执行此操作？

干杯!

---

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

当用户在Angular接管之前点击服务器端呈现的按钮时，你想要做些什么？ 然后你正在寻找Preboot。

你想在服务器端渲染期间从服务器获取数据，然后在客户端使用这些数据？ 那么你可能正在寻找TransferState再水化API。

您的应用程序出现问题，它根本不会对按钮点击做出反应。 即使使用SSR，点击仍然可以使用。 检查控制台是否有错误。

链接地址: http://www.djcxy.com/p/31367.html

上一篇: Client side async. requests with server side rendering

下一篇: Angular Material + Angular Universal