Angular 16 Signal懒加载下异步请求无法触发变更检测求助

问题现象 #

• 懒加载组件中，ngOnInit内的变更检测正常，但其中发起的异步请求返回后，无法自动触发变更检测；切换浏览器标签页再返回时UI会更新，说明数据请求正常，但该状态不可接受。
• 仅懒加载时出现此问题，预加载组件一切正常，而生产环境全部使用懒加载模式。

已排查情况 #

• 调试确认代码全程运行在Angular Zone内，排除Zone逃逸问题。
• 手动调用detectChanges()可强制触发更新，但属于临时 workaround，部分场景实现繁琐，且同页面其他相同配置的组件无需此操作即可正常触发变更检测。
• 使用默认变更检测策略，页面中存在依赖信号状态的按钮启用逻辑、容器显示逻辑，同时使用了async pipe。

相关代码示例 #

TypeScript 代码 #

ngOnInit(): void {
   this.apiService.intitialize();
   this.loading = true;
   this.setupCustomerInfo();
}

setUpCustomerInfo() {
        const party$ = this.partyStore.getActivePerson().pipe(
            filter(party => !!party.partyIdNumber),
            take(1),
            tap(party => console.log('Party received:', party)), // debugging delete later          
            tap(party => this.activeParty = party),
            shareReplay(1)
        );

        party$.pipe(
            filter((party): party is PartyStoreModel => party.isOrganization === true),
            switchMap(party => this.loadOrganizationData(party.partyIdNumber || 0)),
            tap(() => this.loading = false),
            catchError(err => {
                this.handleIbsError(err);
                this.loading = false;
                return of({} as Organization);
            }),
            observeOn(asyncScheduler),
            takeUntil(this.destroy$)
        ).subscribe(org => {
            this.activeOrganization.set(org);
        });

        party$.pipe(
            filter(party => !party.isOrganization),
            tap(() => console.log('Person filter passed')),
            switchMap(party =>  this.ibsService.getPerson(party.partyIdNumber || 0)),
            tap(person => console.log('Person received from API:', person)),
            tap(person => {
                this.phoneNumbersForPers = (person.PersPhones || []).sort((a, b) => a.PhoneSeq - b.PhoneSeq);
                this.currentViewState.set(MFA_CONSTANTS.CARD_VIEW_STATES.SELECTED_PERS_IN_ORG);
                this.loading = false;
            }),
            catchError(err => {
                console.error('Error loading person:', err);
                this.handleIbsError(err);
                this.loading = false;
                return of(undefined);
            }),
            observeOn(asyncScheduler),
            takeUntil(this.destroy$)
        ).subscribe(person => {
                console.log('Setting person activePerson:', person);

                if (person) {
                    if (NgZone.isInAngularZone()) {
                        console.log('Code is running inside the zone.');
                    } else {
                        console.log('Code is running outside of the zone.');
                    }

                    this.activePerson.set(person);

                    if (person?.PersonNbr) {
                        this.getPersonHistory(person.PersonNbr);
                        this.handlePermDenial(person);
                    }
                } else {
                    console.log("person does not exist!")
                }
            });
        }

HTML 代码 #

<ng-container *ngIf="activePerson() as person">
    <div *ngIf="person.PersonNbr > 0">
        -- display code
    </div>
</ng-container>

请求帮助 #

求有相关经验的开发者提供排查思路或可行解决方案，已卡在此问题多日。

内容的提问来源于stack exchange，提问作者HarvP