如何通过Angular Service将弹窗组件表单值传递至Daily组件列表

1. 复用DailyService中已有的添加方法 #

既然Daily组件已经能通过DailyService成功添加任务，说明服务里已经实现了添加任务的核心逻辑。直接在TaskDialogComponent中调用这个方法即可：

// task-dialog.component.ts
import { Component } from '@angular/core';
import { DailyService } from '../daily.service';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-task-dialog',
  templateUrl: './task-dialog.component.html'
})
export class TaskDialogComponent {
  taskForm = new FormGroup({
    title: new FormControl(''),
    description: new FormControl(''),
    // 按你的项目需求添加其他表单字段
  });

  constructor(private dailyService: DailyService) {}

  onSubmit() {
    if (this.taskForm.valid) {
      // 调用服务的添加方法，传入表单值
      this.dailyService.addDailyTask(this.taskForm.value);
      // 添加完成后关闭弹窗（根据你使用的弹窗组件实现，比如MatDialog调用close）
      // this.dialogRef.close();
    }
  }
}

2. 确保DailyService用Observable维护任务列表 #

服务需通过BehaviorSubject或Subject维护任务列表，让组件能订阅数据变化：

// daily.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { Task } from './task.model'; // 你的任务数据模型

@Injectable({ providedIn: 'root' })
export class DailyService {
  private dailyTasksSubject = new BehaviorSubject<Task[]>([]);
  // 对外暴露只读的Observable
  dailyTasks$ = this.dailyTasksSubject.asObservable();

  addDailyTask(task: Task) {
    const currentTasks = this.dailyTasksSubject.value;
    // 生成新数组触发订阅更新
    this.dailyTasksSubject.next([...currentTasks, task]);
  }

  // 保留你已有的其他方法
}

3. Daily组件订阅服务的任务列表更新 #

确保Daily组件已订阅dailyTasks$，这样新任务添加后能自动刷新列表：

// daily.component.ts
import { Component, OnInit } from '@angular/core';
import { DailyService } from './daily.service';
import { Task } from './task.model';

@Component({
  selector: 'app-daily',
  templateUrl: './daily.component.html'
})
export class DailyComponent implements OnInit {
  dailyTasks: Task[] = [];

  constructor(private dailyService: DailyService) {}

  ngOnInit() {
    this.dailyService.dailyTasks$.subscribe(tasks => {
      this.dailyTasks = tasks;
    });
  }
}

4. 弹窗关闭逻辑（按需实现） #

如果使用Angular Material的MatDialog，在弹窗组件中注入MatDialogRef，完成添加后关闭弹窗：

// 修改TaskDialogComponent的构造函数
constructor(
  private dailyService: DailyService,
  private dialogRef: MatDialogRef<TaskDialogComponent>
) {}

// 在onSubmit方法中添加
this.dialogRef.close();

内容的提问来源于stack exchange，提问作者Joskaa