角度 toSignal() 中的初始值

Question

我的信号有问题，我无法设置initialValue：true（TS2769：没有重载与此调用匹配。）

但是，Observable 确实返回一个 Observable。

我通过删除“initialValue”选项并添加“as Signal”解决了问题，但我发现这不是一个令人满意的解决方案，因为我不明白为什么它不起作用。

如果您对信号的使用和我的代码有什么意见，我也很感兴趣：

export class HeaderComponent implements OnInit {
  private readonly injector = inject(Injector);

  constructor(private scrollDispatcher: ScrollDispatcher,private viewportRuler:ViewportRuler) {}

  ngOnInit(): void {
    this.scrollLimit = toSignal<boolean>(this.scrollDispatcher.scrolled()
      .pipe(
        map(()=> this.viewportRuler.getViewportScrollPosition().top),
        map((top) => top < 349)
      ), {injector: this.injector, intialValue: true}) ;
 }
}

这是我不满意的解决方案，但有效

    this.scrollLimit = toSignal<boolean>(this.scrollDispatcher.scrolled()
      .pipe(
        startWith(void 0),
        map(()=> this.viewportRuler.getViewportScrollPosition().top),
        map((top) => top < 349)
      ), {injector: this.injector}) as Signal<boolean>;

Answer 1

您遇到的问题似乎是代码中的拼写错误。

initialValue

选项被错误拼写为

intialValue

。由于这个拼写错误，TypeScript 无法识别该选项，从而导致错误消息

TS2769: No overload matches this call.

要解决此问题，只需更正

initialValue

的拼写：

this.scrollLimit = toSignal<boolean>(this.scrollDispatcher.scrolled()
  .pipe(
    map(() => this.viewportRuler.getViewportScrollPosition().top),
    map((top) => top < 349)
  ), { injector: this.injector, initialValue: true });

通过将拼写更正为

initialValue

，TypeScript 应该正确识别该选项，并且您不需要使用

as Signal<boolean>

解决方法。

关于您的代码和信号的一般使用，这里有一些评论：

1. initialValue

   中的拼写错误：如上所述，请务必仔细检查代码中的拼写错误。即使是很小的拼写错误也可能导致意外错误。

2. 信号用法：信号是 Angular 应用程序中处理异步数据流的强大工具。它们提供了一种干净简洁的方式来表示和管理可观察量的状态。您对信号的使用似乎适合跟踪滚动位置并根据该位置限制某些操作。

3. 注入器用法：使用

   injector

   来提供依赖项在 Angular 应用程序中很常见，尤其是在处理不能直接注入组件的服务时。确保您正确注入依赖项并遵循 Angular 的依赖项注入最佳实践。

4. ViewportRuler 和 ScrollDispatcher：这些是 Angular 服务，用于管理与视口相关的事件和测量。您使用这些服务来跟踪滚动位置似乎是正确的。

总体而言，您的代码看起来结构良好并且遵循 Angular 的约定。请注意拼写错误等小错误，这些错误可能会导致意外行为。