zoz*_*ete 5 server-side-rendering angular-universal angular
我已经克隆了这个项目https://github.com/enten/angular-universal 一切正常,我可以在 chrome 上查看源页面但是当我尝试动态更改数据(例如标题)时,当我检查Chrome 中的页面源。为什么?有没有办法改变服务器端的内容?
有关更多信息,我有一个显示评论列表和用于添加评论的输入字段的应用程序。第一次加载页面时,我可以在“页面源”中看到评论列表。但是当我添加评论,并查看页面来源时,内容与初始值相同。下面是一个简单的例子
这是 post.component.html
<p>{{result}}</p>
<button (click)="changeMessage()">Clique moi</button>
Run Code Online (Sandbox Code Playgroud)
和 post.component.ts
import { Component, OnInit, PLATFORM_ID, Inject, NgZone } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';
const RESULT_KEY = makeStateKey<string>('result');
declare var window: any;
@Component({
selector: 'app-post',
templateUrl: './post.component.html',
styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {
public result;
private isServer: boolean;
constructor(
private tstate: TransferState,
@Inject(PLATFORM_ID) platformId,
private _ngZone: NgZone
) {
this.isServer = isPlatformServer(platformId);
}
ngOnInit() {
if (this.tstate.hasKey(RESULT_KEY)) {
// We are in the browser
this.result = this.tstate.get(RESULT_KEY, '' as string);
} else if (this.isServer) {
// We are on the server
this.tstate.set(RESULT_KEY, 'Im created on the server!' as string);
} else {
// No result received
this.result = 'Im created in the browser!';
}
}
changeMessage() {
this.result = "Message changed";
}
}
Run Code Online (Sandbox Code Playgroud)
所以当页面第一次加载时,我看到“我是在服务器上创建的!” 当我在浏览器上检查“查看页面源代码”时。之后,我点击了在浏览器中看到变化的按钮,但当我检查“查看页面源”时,内容仍然与初始值相同
对不起我的英语 :) 谢谢
| 归档时间: |
|
| 查看次数: |
1359 次 |
| 最近记录: |