将数据从组件中的响应形式发送到另一条路线上的另一组件

Question

我一直在尝试开发我的android Todo应用程序的正式版本，但我并没有真正理解如何将表单中的数据（编辑和添加任务）发送到显示列表的主要组件中。目前，添加任务时，我的列表仅显示一项。如何实现服务以将任务添加到列表而不替换它？ （我认为它来自我的getTask（）函数中的return语句，但我不知道如何处理它）

这是我的编辑表单组件

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";
import { TaskServiceService } from "src/app/task-service.service";

@Component({
  selector: "app-edit-task",
  templateUrl: "./edit-task.component.html",
  styleUrls: ["./edit-task.component.scss"]
})
export class EditTaskComponent implements OnInit {
  myForm: FormGroup;
  title: string = "";
  place: string = "";
  website: string = "";
  time: string = "";
  category: string = "";
  description: string = "";
  task: any;

  public todos = [];
  constructor(
    private fb: FormBuilder,
    private _taskService: TaskServiceService
  ) {}

  addTask(task) {
    this.title = task.title;
    this.time = task.time;
    this.place = task.place;
    this.website = task.website;
    this.category = task.category;
    this.description = task.description;

    this._taskService.setTasks(
      this.title,
      this.time,
      this.place,
      this.website,
      this.category,
      this.description
    );
  }

  ngOnInit() {
    this.myForm = this.fb.group({
      title: "",
      place: "",
      website: "",
      time: "",
      category: "",
      description: ""
    });

    this.todos = this._taskService.getTasks();
  }
}

这是我的服务

import { Injectable } from "@angular/core";

@Injectable({
  providedIn: "root"
})
export class TaskServiceService {
  taskContent = {
    title: "",
    time: "",
    place: "",
    description: "",
    website: "",
    category: ""
  };
  constructor() {}

  setTasks(
    title: string,
    time: string,
    place: string,
    description: string,
    website: string,
    category: string
  ) {
    this.taskContent.title = title;
    this.taskContent.time = time;
    this.taskContent.place = place;
    this.taskContent.description = description;
    this.taskContent.website = website;
    this.taskContent.category = category;
  }

  getTasks() {
    return [
      {
        title: this.taskContent.title,
        time: this.taskContent.time,
        place: this.taskContent.place,
        description: this.taskContent.description,
        website: this.taskContent.website,
        category: this.taskContent.category
      }
    ];
  }
}

这是显示列表的我的待办事项列表组件

import { Component, OnInit } from "@angular/core";
import { TaskServiceService } from "src/app/task-service.service";

@Component({
  selector: "todo-list",
  templateUrl: "./todo-list.component.html",
  styleUrls: ["./todo-list.component.scss"]
})
export class TodoListComponent implements OnInit {
  public todos = [];

  constructor(private _taskService: TaskServiceService) {}

  ngOnInit() {
    this.todos = this._taskService.getTasks();
  }
}

表单HTML

<div class="container">
  <div class="todo-item-edit">
    <form [formGroup]="myForm">
      <div class="col-sm-10 inputEdit">
        <mat-form-field class>
          <input matInput placeholder="Title" formControlName="title">
        </mat-form-field>
      </div>
      <div class="col-sm-10 inputEdit">
        <mat-form-field>
          <input matInput placeholder="Place" formControlName="place">
        </mat-form-field>
      </div>
      <div class="col-sm-10 inputEdit">
        <mat-form-field>
          <input matInput placeholder="Website" formControlName="website">
        </mat-form-field>

      </div>
      <div class="col-sm-10 inputEdit">
        <mat-form-field>
          <input matInput placeholder="Time" formControlName="time">
        </mat-form-field>
      </div>
      <div class="col-sm-10 inputEdit">
        <mat-form-field>
          <mat-select formControlName="category" placeholder="Category" panelClass="panelCustom">
            <mat-option style="color: black;" value="work">Work</mat-option>
            <mat-option style="color: black;" value="personal">Personal</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div class="col-sm-10 inputEdit">
        <mat-form-field>
          <input matInput placeholder="Description" formControlName="description">
        </mat-form-field>
      </div>
    </form>
  </div>

  <div class="validBtn-div text-center">
    <button class="validBtn btn" [routerLink]="['']" type="button" (click)="addTask(myForm.value)"></button>
  </div>
</div>

任务列表HTML

<div class="container">
  <div class="todo-item" *ngFor="let todo of todos">
    <div class="title">{{ todo.title }}</div>
    <div class="time">{{ todo.time }}</div>
    <div class="place">{{ todo.place }}</div>
  </div>

  <div class="addBtn-div text-center">
    <button class="addBtn btn" [routerLink]="['edit']"></button>
  </div>
</div>