Angular 18混合应用模式下计算信号报错：derived signal is not a function

看起来你在Angular 18混合应用里使用计算信号时遇到了“derived signal is not a function”的报错，我来帮你排查修复下问题。

先拆解下你代码里的核心问题，再给你具体的修复方案：

首先，你的form是input.required类型，这意味着父组件必须传入有效值，this.form()永远不会是null或undefined；而testsCount是完全依赖form的计算信号，只要form存在，testsCount()就一定会返回一个数字，不可能是null。所以你当前isLoading里的判断逻辑不仅多余，还可能导致信号依赖链出现异常，这大概率是报错的根源。

下面是具体的修复步骤：

1. 调整输入信号的定义（适配父组件可能的异步初始化场景） #

如果父组件的form不是一开始就有值，而是通过异步操作（比如接口请求）得到的，那不能用input.required，得允许它初始为null：

form = input<FormGroup<TestFormModel>|null>(null);

2. 简化testsCount的计算逻辑 #

处理form为null的边界情况，避免出现读取属性的报错：

testsCount = computed<number>(() => this.form()?.controls.tests.controls.length ?? 0);

3. 重构isLoading的计算逻辑 #

直接基于form是否存在判断加载状态，逻辑更清晰，也能避免嵌套计算信号的潜在问题：

isLoading = computed<boolean>(() => this.form() === null);

4. 模板调用保持不变 #

你当前模板里*ngIf="!isLoading()"和{{ testsCount() }}的写法是正确的，只要计算信号定义正常，调用信号名()就能拿到最新值。

另外提一句，混合应用模式下ChangeDetectionStrategy.OnPush和计算信号是完全兼容的，不用特意修改这个配置。

备注：内容来源于stack exchange，提问作者Dusty