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

“表单组件”模板为<h2>中的每个条目渲染一个<app-input>和一个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

Answer 1

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

使用服务或主题的组件到组件
parent〜child组件数据交换。或通过使用@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});
  }

}

Answer 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);

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

2 个答案: