Angular 17 - Как использовать новый ввод с декларативным значением с toSignal

Мы можем использовать effect, чтобы отслеживать новые изменения сигнала и запускать обновление канала! Только когда TransferId доступен, мы запускаем обновление!

Затем мы берем effectRef, который можно использовать для уничтожения сигнала, как только мы закончим обновление канала. Для этого мы можем использовать effectRef.destroy()!

import { Component, effect, input } from '@angular/core';
import { Subscription, of, interval } from 'rxjs';
import { toSignal } from '@angular/core/rxjs-interop';
import { filter, map } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-child',
  standalone: true,
  imports: [CommonModule],
  template: `{{progress$ | async | json}}`,
})
export class ChildComponent {
  transferId = input.required<string>();
  progressSteamType = input.required<string>();
  progressBarHeightSmall = input<boolean>(true);

  progress$ = interval(1000).pipe(
    map(() => ({ transferId: 'test', type: 'qwerty' }))
  );

  private _subs = new Subscription();
  progress = toSignal<any | null>(this.progress$);

  constructor() {
    const effectRef = effect(() => {
      const transferId = this.transferId();
      if (transferId) {
        console.info('time to cleanup', transferId, this.progressSteamType());
        this.progress$ = this.progress$.pipe(
          filter(
            (p: any) =>
              p.transferId.toLowerCase() === transferId?.toLowerCase() &&
              p.type === this.progressSteamType()
          )
        );
        effectRef.destroy();
      }
    });
  }

  ngOnInit(): void {}
}

РОДИТЕЛЬ:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';

@Component({
  selector: 'app-root',
  imports: [ChildComponent],
  standalone: true,
  template: `
    <app-child [transferId] = "'test'" [progressSteamType] = "'qwerty'"/>
  `,
})
export class App {}

bootstrapApplication(App);

Демо-версия Stackblitz