如何在 Angular 中将数据从一个组件发送到另一个组件？

Question

我对 Angular 很陌生，我真的很难找到这个问题的简明答案。 我在这里有一个表单组件：

（我排除了指令和导入，因为它们并不真正相关）

export class JournalFormComponent implements OnInit {  

  public entries: EntriesService;  

  constructor(entries: EntriesService) { 
    this.entries = entries;
  }

  ngOnInit(): void {
  }

}

EntriesService服务只存储一个条目数组：

export class Entry {
  constructor (
    public num: number,
    public name: string,
    public description: string,
    public text: string
  )  { }  
}

表单组件模板为EntriesService中的每个条目呈现一个<h2>和一个<app-input>组件，这很有效。 看起来像这样：

<div *ngFor="let entry of entries.entries">
  <h2> {{ entry.num }}. {{ entry.name }} </h2>
  <app-input id="{{entry.num}}"></app-input>
</div>

这是<app-input>输入组件：

@Component({
  selector: 'app-input',
  template: `
    <textarea #box
      (keyup.enter)="update(box.value)"
      (blur)="update(box.value)">
    </textarea>
    `
})
export class InputComponent {
  private value = '';    

  update(value: string) { 
    this.value = value;    
  }

  getValue () {
    return this.value;
  }  
}

InputComponent完美地存储了用户的文本，但我不知道如何将该数据传递给 Form 组件的EntriesService以更新 Entry 以便稍后导出或保存。 这是怎么做到的？

我想我很好地表达了这个问题，但我不确定。 如果您需要澄清，我会提供。

不确定是否重要，但我使用的是 Angular 9.1.11

Answer 1

有许多方法可以将数据从一个组件更新到另一个组件。

1. 使用服务或主题的组件到组件
2. 使用 Input() 和 Output() 装饰器进行父子组件数据交换。 或者通过使用 @ViweChild() 交互。 还有很多

但请务必检查 angular 文档https://angular.io/guide/component-interaction 。

使用下面的简单代码，您可能需要包含诸如 FormsModule 之类的模块。 并导入 Input()、Output 等

@Component({
  selector: 'app-journal-form',
  template: `
    <div *ngFor="let entry of entries.entries; let i=index">
      <h2> {{ entry.num }}. {{ entry.name }} </h2>
      <app-input id="{{entry.num}}" [entry]="entry" [arrayIndex]="i" (updateEntry)="updateEntry($event)" ></app-input>

    </div>`
})
export class JournalFormComponent implements OnInit {
  constructor(private entries: EntriesService) { 
    this.entries = entries;
  }

  ngOnInit(): void {
  }

  updateEntry(event){
    console.log(event);
    this.entries[event.arrayIndex] = event.entry;
  }

}

@Component({
  selector: 'app-input',
  template: `
    <textarea [(ngModel)]="name"
      (keyup.enter)="update()"
      (blur)="update()">
    </textarea>
    `
})
export class InputComponent {
  @Input() entry: any;
  @Input() arrayIndex: number;
  @Output() updateEntry: EventEmitter<any> = new EventEmitter();
  name:string;
  constructor() { 
    console.log(entry);
    this.name = entry.name;
  }

  update(){
    this.entry.name = this.name;
    this.updateEntry.emit({entry: this.entry, arrayIndex});
  }

}

Answer 2

Output 事件将在这种情况下有所帮助。

<div *ngFor="let entry of entries.entries">
  <h2> {{ entry.num }}. {{ entry.name }} </h2>
  <app-input id="{{entry.num}}" (entryChange) = "entry.text = $event"></app-input>
</div>

应用程序输入组件

export class InputComponent {
  private value = '';
  @Output() entryChange = new EventEmitter<string>();
  update(value: string) { 
    this.value = value;
   this.entryChange.emit(value);
  }
}

除了entry.text = $event ，您还可以将其传递给任何保存function，例如saveEntry($event);