Question

我有一个Parent组件和一个子组件。父组件通过属性绑定将对象传递给子组件。

这是Master-Child组件通信的简单方案

我的要求是保持父对象中的值，直到子组件在对数据进行一些操作之后调用save事件，同时在父对象发生更改时更新或覆盖子数据。

我用我的实验创造了一个插件。它包含3个组件。

StudentDetails1 - 值以两种方式更新。
StudentDetails2 - 为绑定的属性实现了Setter和Getter，但是当父对象更改时子数据不会更新。（仅在从父构造函数设置时才有效。）（Notify child component about changes in Angular2）
StudentDetails3 - 已实施ngOnChanges，但遇到与StudentDetails2相同的问题

有人能告诉我使用typescript在Angular2中实现这个的正确方法吗？情节是否荒谬？：）

http://plnkr.co/edit/SQLRGjaapIslwHZYONY3?p=preview

//Parent component
import {Component} from 'angular2/core'

import {StudentDetails1} from './studentDetails1'
import {StudentDetails2} from './studentDetails2'
import {StudentDetails3} from './studentDetails3'
import {Student} from './student'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <h2>Student Master</h2>
    Selected Student <input [(ngModel)]="selectedStudent.name" type="text">
    <student-details1 [student]="selectedStudent" (onCompletion)="onCompletion($event)"></student-details1>
    <student-details2 [student]="selectedStudent" (onCompletion)="onCompletion($event)"></student-details2>
    <student-details3 [student]="selectedStudent" (onCompletion)="onCompletion($event)"></student-details3>
  `,
  directives: [StudentDetails1,StudentDetails2,StudentDetails3]
})
export class App {
  public title = 'Tour of Heroes';
  public selectedStudent: Student;

  constructor() {
      this.selectedStudent = {
          id: 1,
          name: "John Doe"
      }
  }

  onCompletion(modifiedStudent: Student) {
      this.selectedStudent = modifiedStudent;
  }
}

Child1

import {Component,EventEmitter} from 'angular2/core'
import {Student} from './student'
@Component({
  selector: 'student-details1',
  providers: [],
  template: `
    <h3>Student Details 1</h3>
    Student : <input [(ngModel)]="student.name" type="text">
    <a href="javascript:;" (click)="onSubmit()">Save</a>
  `,
  directives: [],
  inputs:["student"],
  outputs: ['onCompletion']
})
export class StudentDetails1 {
  onCompletion: EventEmitter<Student> = new EventEmitter();

  public student:Student;

  onSubmit(){
      this.student.name += "_Modified";
      this.onCompletion.emit(this.student);
  }
}

CHILD2

import {Component,EventEmitter} from 'angular2/core'
import {Student} from './student'
@Component({
  selector: 'student-details2',
  providers: [],
  template: `
    <h3>Student Details 2</h3>
    Student : <input [(ngModel)]="_student.name" type="text">
    <a href="javascript:;" (click)="onSubmit()">Save</a>
  `,
  directives: [],
  inputs:["student"],
  outputs: ['onCompletion']
})
export class StudentDetails2 {
  onCompletion: EventEmitter<Student> = new EventEmitter();

  private _student:Student;
  set student(value:Student){
    this._student = {
      id:value.id,
      name:value.name
    }
  }
  get student(){
    return _student;
  }

  onSubmit(){
      this._student.name += "_Modified";
      this.onCompletion.emit(this._student);
  }
}

Child3

import {Component,EventEmitter,OnChanges} from 'angular2/core'
import {Student} from './student'
@Component({
  selector: 'student-details3',
  providers: [],
  template: `
    <h3>Student Details 3</h3>
    Student : <input [(ngModel)]="_student.name" type="text">
    <a href="javascript:;" (click)="onSubmit()">Save</a>
  `,
  directives: [],
  inputs:["student"],
  outputs: ['onCompletion']
})
export class StudentDetails3 implements OnChanges {
  onCompletion: EventEmitter<Student> = new EventEmitter();

  private _student:Student;
  public student:Student;

  onSubmit(){
      this._student.name += "_Modified";
      this.onCompletion.emit(this._student);
  }

  ngOnChanges(){
    this._student = {
      id:this.student.id,
      name:this.student.name
    }
  }
}

拉姆

Answer 1

Hierarchical Injectors开发指南中提供了“编辑详细记录”问题的通用（优雅）解决方案。

通用EditItem<T>类和通用RestoreService<T>服务用于帮助编辑详细记录。除非用户保存更改，否则更改不会反映到父级（即应用程序的其余部分）。

Answer 2

我会这样做

http://plnkr.co/edit/bOyWbU3bznFYfUFpGYOM?p=preview（src / studentDetails1.ts）

拆分下游和上游绑定

Student : <input [ngModel]="student.name" (ngModelChange)="_student=$event" type="text">

export class StudentDetails1 {
  onCompletion: EventEmitter<Student> = new EventEmitter();

  public student:Student;
  private _student:Student;

  onSubmit(){
      // update upstream model only on submit
      this.student.name = this._student + "_Modified";
      this.onCompletion.emit(this.student);
  }
}

Angular2不会反映对详细记录的编辑，直到保存编辑为止

2 个答案: