Question

我已经克隆了这个项目https://github.com/enten/angular-universal 一切正常，我可以在chrome上查看源页面，但是当我尝试动态更改数据（例如标题）时，当我在Chrome中检查页面源时没有任何改变。为什么？有没有办法更改服务器端内容？

有关更多信息，我有一个显示注释列表和用于添加注释的输入字段的应用程序。首次加载页面时，我可以在“页面源”中看到评论列表。但是，当我添加评论并检查页面源时，内容与初始值相同。下面是一个简单的示例

这是post.component.html

<p>{{result}}</p>
<button (click)="changeMessage()">Clique moi</button>

还有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";
    }
}

因此，当页面首次加载时，我会看到“我在服务器上创建的！”当我在浏览器上选中“查看页面源代码”时。之后，单击浏览器中看到更改的按钮，但是当我选中“查看页面源”时，内容仍与初始值相同

对不起，我的英语:) 谢谢

查看源页面未使用Angle Universal SR更新

0 个答案: