我目前正在尝试解决我目前遇到的 transferState 问题,它试图序列化应用程序组件,而我提供的是后端提供的 json 数据。
this._httpClient
.get(fullUrl)
.pipe(
catchError((errorResponse: HttpErrorResponse) => {
console.error(
`getPage() failed. fullUrl=${fullUrl} | errorStatusText=${this.errorStatusText}`
);
return of([]);
})
)
.subscribe((resp) => {
if (this._isServerSide) {
this._transferState.set(stateKey, resp);
}
this.page.next(resp);
});
代码中没有任何地方是应用程序组件被我明确序列化为 json - 通过一些调试,我了解到这种方法是罪魁祸首。
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
const TRANSFER_STATE_SERIALIZATION_PROVIDERS = [{
provide: BEFORE_APP_SERIALIZED,
useFactory: serializeTransferStateFactory,
deps: [_angular_common__WEBPACK_IMPORTED_MODULE_5__.DOCUMENT, _angular_core__WEBPACK_IMPORTED_MODULE_6__.APP_ID, _angular_platform_browser__WEBPACK_IMPORTED_MODULE_4__.TransferState],
multi: true
}];
function serializeTransferStateFactory(doc, appId, transferStore) {
return () => {
// The `.toJSON` here causes the `onSerialize` callbacks to be called.
// These callbacks can be used to provide the value for a given key.
const content = transferStore.toJson();
if (transferStore.isEmpty) {
// The state is empty, nothing to transfer,
// avoid creating an extra `<script>` tag in this case.
return;
}
const script = doc.createElement('script');
script.id = appId + '-state';
script.setAttribute('type', 'application/json');
script.textContent = (0,_angular_platform_browser__WEBPACK_IMPORTED_MODULE_4__["ɵescapeHtml"])(content);
doc.body.appendChild(script);
};
}
transferStore的内容是什么? 我明确设置的是我从后端收到的页面数据,但是当我以某种方式调用 toJson 时,它会以某种方式尝试转换应用程序组件——我的角度形式组件。
这会导致问题,因为我的一个组件中有一个循环引用 - 角度形式,而且似乎确实有一种简单的方法来解决这个问题,因为它似乎是设计使然。