如何使用角度信号来产生很多副作用

Question

所以，我有以下代码

import { Component, computed, model, signal } from '@angular/core'
import { IVillageWiseMember } from '../../../types/IVillageWisemember'
import { IDataWithPagination } from '../../../types/IDataWithPagination'
import { INITIAL_PAGINATION_DATA } from '../../../constants/selectors'
import { HttpClient } from '@angular/common/http'
import { finalize } from 'rxjs'
import { TableSkeletonComponent } from '../../shared/skeleton/table-skeleton/table-skeleton.component'
import { FormsModule } from '@angular/forms'

@Component({
  selector: 'app-member-table',
  standalone: true,
  imports: [TableSkeletonComponent, FormsModule],
  templateUrl: './member-table.component.html',
})
export class MemberTableComponent {
  private readonly API_URL = 'http://localhost:5199'

  loading = signal(true)
  pageSize = signal(10)
  pageNumber = signal(1)

  idSearch = model('')
  nameSearch = model('')
  houseSearch = model('')
  villageSearch = model('')

  memberInfo = signal<IDataWithPagination<IVillageWiseMember[]>>({
    paginationData: INITIAL_PAGINATION_DATA,
    data: [],
  })

  memberData = computed(() => this.memberInfo().data)
  paginationData = computed(() => this.memberInfo().paginationData)

  constructor(private readonly httpClient: HttpClient) {
    this.getMemberInfo()
  }

  public getMemberInfo() {
    let url = `${this.API_URL}/api/v1/Member/GetMemberDetails? 
    pageSize=${this.pageSize()}&pageNumber=${this.pageNumber()}`
    if (this.idSearch().length > 2) {
      url = `${url}&idSearch=${this.idSearch()}`
    }
    if (this.nameSearch().length > 2) {
      url = `${url}&idSearch=${this.nameSearch()}`
    }
    if (this.houseSearch().length > 2) {
      url = `${url}&idSearch=${this.houseSearch()}`
    }
    if (this.villageSearch().length > 2) {
      url = `${url}&idSearch=${this.villageSearch()}`
    }

    this.httpClient
      .get<IDataWithPagination<IVillageWiseMember[]>>(url)
      .pipe(
        finalize(
          () =>
            // setTimeout(() => {
            this.loading.set(false)
          // }, 3000)
        )
      )
      .subscribe(value => {
        this.memberInfo.set(value)
      })
  }

  handlePageChange(page: number) {
    this.pageNumber.set(page)
    this.getMemberInfo()
  }

  public generatePaginationArray(
    currentPageNumber: number,
    currentPageSize: number,
    totalItemCount: number
  ): number[] {
    const pagesToShow = 5
    const halfPagesToShow = Math.floor(pagesToShow / 2)

    const totalPages = Math.ceil(totalItemCount / currentPageSize)

    let startPage = Math.max(1, currentPageNumber - halfPagesToShow)
    const endPage = Math.min(totalPages, startPage + pagesToShow - 1)

    if (endPage - startPage + 1 < pagesToShow) {
      startPage = Math.max(1, endPage - pagesToShow + 1)
    }

    return Array.from(
      { length: endPage - startPage + 1 },
      (_, index) => startPage + index
    )
  }
}

现在，正如你所看到的，我有一个 getMemberInfo 函数，我正在将其与角度信号一起使用，现在，在分页期间，我一次又一次地调用该函数，现在在某种程度上，这是有效的，这里的问题是我想要这个getMemberInfo 函数在每次这些信号发生变化时运行，包括 pageNumber、pageSize 或任何这些搜索参数，但我不希望它在更改 memberInfo 信号时再次运行，我该如何在此处执行此操作，我尝试在构造函数内部使用效果，但没有成功，那么，这里的解决方案是什么？ 另外，我也尝试过这个

constructor(private readonly httpClient: HttpClient) {
    effect(
      () => {
        this.getMemberInfo()
      },
      {
        allowSignalWrites: true,
      }
    )
  }

没成功

Answer 1

我们可以通过

untracking

memberInfo

信号来实现这一点：

effect(
  () => {
     untracked(()=>{
       this.memberInfo();
     })
    this.getMemberInfo()
  },
  {
    allowSignalWrites: true,
  }
)

了解更多信息