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

【问题标题】：How do I send data from a Component to another Component in Angular?如何在 Angular 中将数据从一个组件发送到另一个组件？
【发布时间】：2020-12-06 03:50:30
【问题描述】：

我对 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 完美地存储了用户的文本，但我不知道如何将该数据传递给表单组件的EntriesService 以更新条目以便稍后导出或保存。这是怎么做到的？

我认为这个问题的措辞很好，但我不确定。如果您需要澄清，我会提供。

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

【问题讨论】：

Angular 文档是组件间通信的最佳信息来源。具体来说：angular.io/guide/…
只需将表单数据设置为服务中的新变量：this.entries.savedData = this.value 并稍后使用。
在将 InputComponent 调用事件发射器中的值保存到 JournalFormComponent angular.io/guide/inputs-outputs时，您可以在此处使用@Output 事件发射器

标签： javascript angular typescript components

【解决方案1】：

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

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

但请务必检查角度文档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});
  }

}

【讨论】：

我在其他地方见过Output()，但从来没有见过带模板的Input()。这成功了。

【解决方案2】：

Output event 在这种情况下会有所帮助。

<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，您还可以将其传递给任何保存函数，例如saveEntry($event);

【讨论】：