角度传输状态隐含地包含组件状态——当我明确地只提供它页面数据时?

问题描述 投票:0回答:0

我目前正在尝试解决我目前遇到的 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 时,它会以某种方式尝试转换应用程序组件——我的角度形式组件。

这会导致问题,因为我的一个组件中有一个循环引用 - 角度形式,而且似乎确实有一种简单的方法来解决这个问题,因为它似乎是设计使然。

angular angular-forms angular-transfer-state
© www.soinside.com 2019 - 2024. All rights reserved.