- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我已经成功设置并使用了 Angular5 + SSR。还是很不错的。
所有组件都适用于 SSR 和非 SSR。还有一些服务调用外部 HTTP get API 来获取一些数据。当然,它在非 SSR 模式下也能正常工作。
但是,问题是在SSR上,节点服务器不支持获取和渲染数据。客户端抓取渲染后才能看到抓取到的数据。
import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable()
export class BannerService {
constructor(public http: HttpClient){
console.log('SmsService Initialized...');
}
getBanners(){
return this.http.get(BASE_API_URL + '/getData', httpOptions);
}
}
home.component.ts
import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router } from "@angular/router";
import {Subscription} from "rxjs/Subscription";
import {BannerService} from "../../services/banner.service";
@Component({
selector: 'app-home',
styleUrls: ['home.container.css'],
templateUrl: 'home.container.html'
})
export class HomeContainerComponent implements OnInit, OnDestroy {
public horizontalBannerList1;
public horizontalBannerList2;
public verticalBannerList;
private bannerList;
constructor( private router: Router, private bannerService: BannerService){
...
}
ngOnInit() {
this.initBannerList();
}
ngOnDestroy() {
...
}
initBannerList(){
if(this.bannerList){
return;
}
this.bannerService.getBanners().subscribe(
result => {
console.log("bannerList result : ", result);
this.bannerList = result;
},
error => {
console.error("bannerList error: ", error);
},
() => {
console.log("bannerList completed");
});
}
}
我希望在 SSR 上节点服务器调用 HTTP 请求数据并将其呈现在 index.html 上,但它不是......
我是想念还是被误解了?
附言:报告了相同的问题。 https://github.com/angular/universal/issues/674如果我解决了这些问题或找到了好的文档,我会再次更新它。 :)
最佳答案
本文介绍了如何在 angular universal 中进行后端调用。 https://angular.io/guide/universal#absolute-http-urls
关于Angular5 服务器端渲染,外部 Api 数据服务在 ssr 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49355650/
今天有小伙伴给我留言问到,try{...}catch(){...}是什么意思?它用来干什么? 简单的说 他们是用来捕获异常的 下面我们通过一个例子来详细讲解下
我正在努力提高网站的可访问性,但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接,因
说现在是 6 点,我有一个 Timer 并在 10 点安排了一个 TimerTask。之后,System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我就废话不多说了,大家还是直接看代码吧~ ? 1
Maven系列1 1.什么是Maven? Maven是一个项目管理工具,它包含了一个对象模型。一组标准集合,一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。 核心功能 Mav
我是一名优秀的程序员,十分优秀!