在Angular universal中，Angular universal的服务器将库的脚本和样式直接插入到响应中，而不是通过标记引用它们。但是，有时你想要添加自己的脚本，但是在页面渲染完成之后，脚本并没有被添加到页面中。这通常是因为你没有提供正确的客户端应用程序的TS文件，或者这个文件存在一些可能会导致错误的问题。

为了在Angular universal中添加自己的脚本，您需要使用TransferState机制。 TransferState允许应用程序在客户端和服务器之间传递状态。

以下是一个例子：

首先，创建一个服务，该服务依赖于TransferState和PLATFORM_ID，并在客户端和服务器之间传递信息。

import {Inject, Injectable, PLATFORM_ID} from '@angular/core'; import {isPlatformBrowser, isPlatformServer} from '@angular/common'; import {makeStateKey, TransferState} from '@angular/platform-browser';

@Injectable({ providedIn: 'root', }) export class StateTransferService { constructor( @Inject(PLATFORM_ID) private readonly platformId: object, private readonly transferState: TransferState, ) {}

hasKey(key: string): boolean { return this.transferState.hasKey(makeStateKey(key)); }

get(key: string): T { const result = this.transferState.get(makeStateKey(key), null);

if (isPlatformBrowser(this.platformId)) {
  this.transferState.remove(makeStateKey(key));
}

return result;

}

set(key: string, data: T): void { this.transferState.set(makeStateKey(key), data); } }

接下来，在你的组件中使用它

import { Component, OnDestroy, OnInit } from '@angular/core'; import { StateTransferService } from './state-transfer.service';

@Component({ selector: 'app-root', template: `

Hello, world!