角度信号和计算属性

Question

我很难理解信号和计算属性的概念。我有一些虚拟数据 dummyTasks，它是一个简单的任务对象数组，以及一个代表所选用户任务的

selectedUserTasks

属性。所以，当我将 dummyTasks 设置为信号时，我只是不明白我的代码是如何工作的。当我将其保留为简单的属性绑定值时，删除任务不起作用。我想知道为什么。所有答案均表示赞赏。谢谢。这是我的代码：

export class TasksComponent {
  selectedUser = input<User>()
  selectedUserId = input.required<string>()
  selectedUserTasks = computed(() => (
    this.dummyTasks.filter((task) => this.selectedUserId() === task.userId)
  ))

  dummyTasks = [
    {
      id: 't1',
      userId: 'u1',
      title: 'Master Angular',
      summary:
        'Learn all the basic and advanced features of Angular & how to apply them.',
      dueDate: '2025-12-31',
    },
    {
      id: 't2',
      userId: 'u3',
      title: 'Build first prototype',
      summary: 'Build a first prototype of the online shop website',
      dueDate: '2024-05-31',
    },
    {
      id: 't3',
      userId: 'u3',
      title: 'Prepare issue template',
      summary:
        'Prepare and describe an issue template which will help with project management',
      dueDate: '2024-06-15',
    },
  ]

  onCompleteTask(id: string) {    
    this.dummyTasks.set(this.dummyTasks().filter((task) => task.id !== id))
  }
}

当我将

dummyTasks

初始化为基本属性绑定属性，而不是信号，并删除任务时，或者在这种情况下，简单地过滤掉任务时，不起作用：

onCompleteTask(id: string) {    
    this.dummyTasks = this.dummyTasks.filter((task) => task.id !== id)
  }

Answer 1

为了更好地理解ui机制，您应该了解以下内容。

信号/计算属性：

• 是反应值，允许 Angular 自动跟踪和传播状态变化。

简单属性：

• 不具有反应性。 Angular 不会自动跟踪和传播状态变化。

没有信号的

Angular使用zone.js作为

monkey-patching*

异步浏览器API（例如setTimeout、XHR或事件侦听器）并通知Angular，但它不跟踪直接属性更改。这就是为什么你必须手动告诉 Angular 更新 UI。例如，您可以使用 ChangeDetectorRef （或 NgZone）

  ...
  constructor(private cdr: ChangeDetectorRef) {}
  ...
  onCompleteTask(id: string) {
    this.dummyTasks = this.dummyTasks.filter(task => task.id !== id);
    this.cdr.detectChanges();
  }
  ...

带信号的 Angular 不依赖 zone.js，并且未来应用程序会趋向于无 zone.js 的反应式架构。

*monkey-patch：在运行时动态修改或扩展现有代码的行为。