如何使用角度服务将表单值从一个组件传递到另一个组件中的列表？

Question

我一直在尝试开发一个待办事项列表项目。我有四个组成部分：每日、项目列表、项目和添加任务 daillog

daily 组件包含一个表单和一个显示表单值的列表。我接下来要做的是在对话框模式（新的单独组件）中创建一个表单，并将其值添加到日常组件的列表中

以下是代码：

每日服务.ts

此服务代码用于从表单中获取值并将其添加到列表中。

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { DailyTask } from './models';

@Injectable({ providedIn: 'root' })
export class DailyService {

private _dailies$ = new BehaviorSubject<DailyTask[]>([]); 
public getDailies(): DailyTask[] {
return this._dailies$.getValue();
}

public setDailies(data: DailyTask[]): void {
 this._dailies$.next(data);
}

public getDailiesObservable(): Observable<DailyTask[]> {
return this._dailies$.asObservable();
}

public createTask(newTask: string): void{

console.log( "check");

  const dailyTask: DailyTask = { task: newTask, type: 'DAILY' };
  this.setDailies([dailyTask, ...this.getDailies()])
 }
}

每日.component.Ts

export class DailyComponent implements OnInit {
  public dailyList$: Observable<DailyTask[]> | null = null;

  constructor(private _dailyService: DailyService) {}

  ngOnInit(): void {
    this.dailyList$ = this._dailyService.getDailiesObservable();
  }

  public addDaily(name: string) {
     this._dailyService.createTask(name);
  }
 }

每日.component.html

 <mat-card>
   <h1>Daily</h1>
    <app-item-list
      [type]="'DAILY'"
      [initialData$]="dailyList$"
      [onAddItem]="addDaily.bind(this)"
    ></app-item-list>
 </mat-card>

Item-List.component.html

<div>
 <mat-form-field appearance="outline">
 <input
  matInput
  placeholder="Add a Task"
  (keyup.enter)="addTask()"
  autocomplete="off"
  [formControl]="nameControl"/>
 </mat-form-field>
</div>

<ng-container *ngIf="filteredData$ | async as data">

<app-item
  [value]="value"
  *ngFor="let value of data; index as index"
  (inputDataChange)="removeTask(data, index)"
>
</app-item>
</ng-container>

项目列表.component.ts

export class ItemListComponent implements OnInit {
   
   nameControl = new FormControl('');
   @Input() public type: ItemType | null = null;
   @Input() public onAddItem: Function | null = null;
   
   constructor(private _homeService: HomeService) {}
   ngOnInit(): void {}

   addTask() {
     if (this.onAddItem) {
        this.onAddItem(this.nameControl.value);
        this.nameControl.reset();
   }
 }

item.component.html

<div class="displayTask">
  <div class="displayvalue" [ngClass]="{ 'line-through': value.task }">
     {{ value.task | uppercase }}
  </div>
</div>

项目.component.ts

export class ItemComponent implements OnInit {
  @Input()
   value: any;
  constructor() {}
  ngOnInit(): void {}
 }

上面的代码组工作完美，下面是新组件的代码任务日志

任务日志.html

<div mat-dialog-title class="dailogHeader">
   <h1 >Create Daily</h1>
</div>

<div mat-dialog-content>
    <div class="dialogContent">
      <p>Task</p>
    <mat-form-field appearance="outline">
    <input
        matInput
        placeholder="Add a new Task"
        autocomplete="off"
        (keyup.enter)="addDailogTask()"
        [formControl]="nameControl"
    />
    </mat-form-field>
    </div>
</div>

任务-daillog.component.ts

export class TaskDialogComponent implements OnInit {
  nameControl = new FormControl('');

  constructor(
    public dialogRef: MatDialogRef<TaskDialogComponent>,
    private _dailyService: DailyService,
  ) {}

  ngOnInit(): void {}

  onNoClick(): void {
    this.dialogRef.close();
  }

  addDailogTask(){
    const value$ =   this.nameControl.value;
    this.nameControl.reset();
    console.log(value$);
  }
 }

在 task-dialog.component.ts 中，我有从表单中获取值的功能，但我被困在这里，不知道如何继续。我想学习如何从任务对话框组件到里面的列表每日组件.

这里也是项目的Stackblitz。

有人可以帮我弄这个吗 。我对角度比较陌生，非常感谢您的帮助。提前致谢！。

Answer 1

只要您使用相同的服务实例，就可以从任何地方调用this._dailyService.createTask(value$);。 这将触发 this.dailyList$ observable 并更新列表。

export class TaskDialogComponent implements OnInit {
      nameControl = new FormControl('');
      @Input() public onAddDialogItem: Function | null = null;
    
      constructor(
        public dialogRef: MatDialogRef<TaskDialogComponent>,
        private _dailyService: DailyService,
      ) {}
    
      ngOnInit(): void {}
    
      onNoClick(): void {
        this.dialogRef.close();
      }
    
      addDailogTask(){
        const value$ =   this.nameControl.value;

        // you can add it from the service
        this._dailyService.createTask(value$);
        this.nameControl.reset();
        console.log(value$);
      }
     }