这是使用 Angular 信号的正确方法吗？为什么我还需要 ChangeDetectorRef.detectChanges()？

Question

我正在尝试使用信号，我想知道这里的用例是否真的有益于不使用信号，而只是拥有一个“正常”类成员

swiper?: Swiper

：

@Component({
  selector: '[app-test]',
  standalone: true,
  imports: [CommonModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class TestComponent implements AfterViewInit {
  swiper = signal<Swiper|undefined>(undefined);

  constructor(
    private readonly cd: ChangeDetectorRef,
    private readonly elementRef: ElementRef,
  ) { }

  ngAfterViewInit(): void {
    const swiper: unknown = this.elementRef.nativeElement.querySelector('swiper-container')?.swiper;

    if (swiper instanceof Swiper) {
      this.swiper.set(swiper);
      this.cd.detectChanges();
    }
  }

  slideTo(direction: 'prev'|'next'): void {
    const swiper = this.swiper();
    if (!swiper) return;
    direction === 'prev' ? swiper.slidePrev() : swiper.slideNext();
  }
}

在模板中：

<fieldset *ngIf="swiper() as swiper">
  <button
    type="button"
    [attr.disabled]="swiper.activeIndex === 0 ? true : null"
    (click)="slideTo('prev')"
  >Prev</button>

  <button
    class="slider-navigation slider-navigation--next"
    type="button"
    [attr.disabled]="swiper.activeIndex === swiper.slides.length - 1 ? true : null"
    (click)="slideTo('next')"
  >Next</button>
</fieldset>

我确实知道我需要使用

this.cd.detectChanges();

，因为

ngAfterViewInit

在 Angular 的更改检测之后运行。但 Signales 不应该处理这个问题吗？它使代码看起来就像根本没有使用信号一样。好处在哪里？我在这里使用正确吗？

Answer 1

这是您在 StackBlitz 上的代码： https://stackblitz.com/edit/stackblitz-starters-1tnwze?file=src%2Fmain.ts

它无需 cd.detecteChanges() 调用即可工作：

它只是在开发模式下将一个著名的错误打印到控制台;)