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

商店RLB

我对 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
  )  { }  
}

Form Component 模板为中的每个条目呈现一个<h2>和一个<app-input>Component EntriesService，这是有效的。看起来像这样：

<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

导航库马尔五世

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

组件到组件使用服务或主题
使用 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});
  }

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。