Angular 2 @Input() 装饰器用于具有 Date 类型属性的对象

Question

我有一个组件充当哑子，并通过 @Input() 类型从其父级获取对象。

这个对象（一个人）有一个属性/字段“dob”，它是日期类型。

这是父组件构造函数从路由解析中获取人员，然后它将传递给子组件@Input()。

 constructor(private route: ActivatedRoute,
          private authService: AuthenticationService,
          private personService: PersonService) {

    this.route.data.subscribe(result => {
    this.person = Object.assign({}, result['data'].person);
    console.log('PERSON PARENT DATE: ' + this.person.dob);

  },
  error => {
    console.log('PersonOverviewComponent - Error getting resolve data: ' + error);
  });
}

这是子组件：

export class MyDetailsOverviewComponent implements OnInit {

  @Input() person: Person;
  @Input() member: Member;
  @Input() personIsMember: boolean;

  constructor(private route: ActivatedRoute, private authService: AuthenticationService) {

  }

  ngOnInit() {
    console.log('PERSON CHILD DATE: ' + this.person.dob);
  }

}

并且父模板绑定到@Input()

  <div class="row">
       <div class="offset-sm-1 col-sm-5">
          <my-details-overview
              [person]="person"
              [member]="member"
              [personIsMember]="personIsMember">
          </my-details-overview>
        </div>
  <div *ngIf="personIsOfficial" class="offset-sm-1 col-sm-4">
      <emergency-info-overview
          [info]="emergencyInfo"
          [person]="person"
          [personOfAge]="personOfAge">
        </emergency-info-overview>
  </div>

这是获取人员对象并分配从 .Net Web api 返回的日期的服务。

getPerson(id: string): Observable<Person> {
    let params = new URLSearchParams();
    params.set('id', id);
    return this.http.get(this.config.apiEndpoint + '/People/', {search: params})
      .map((r: Response) => {
        let person = r.json() as Person;
        person.dob = new Date(r.json().dob);
        this.utilities.cleanApiResponseData(person);
        return person;
      })
      .catch(error => {
        console.log('PersonService Error: ' + error);
        return Observable.throw(error);
      });
}

从父组件到控制台的 person.dob 输出显示：

个人父母日期：2016 年 12 月 15 日星期四 00:00:00 GMT+0000（GMT 标准时间）

但是，从子组件输出到控制台的 person.dob 显示：

个人孩子日期：空

子对象中的 person 对象本身是有效的，但 dob 属性除外。这是从子级打印到控制台的@Input() 成员。

PERSON CHILD DATE: {
   "rowId":6,
   "aspNetUserId":"#########",
   "email":"#####",
   "title":"Mr",
   "forename":"James",
   "surname":"Brown",
   "address1":"#####",
   "address2":"",
   "address3":"",
   "address4":"",
   "town":"BIGGLESWADE",
   "county":"Bedfordshire",
   "country":"USA",
   "postCode":"#####",
   "daytimePhone":"",
   "eveningPhone":"",
   "mobile":null,
   "dob":null
}

我的问题是，在将 person 对象的 Date 类型属性传递给子 @Input() person 成员时，如何获取它的副本？

我假设我在这里遗漏了一些东西，因为 Date 属性是一个引用类型，但无法确定如何让它工作。

提前致谢。

Person对象模型如下供参考：

export class Person {
  aspNetUserId: string;
  email: string;
  title: string;
  forename: string;
  surname: string;
  address1: string;
  address2: string;
  address3: string;
  address4: string;
  town: string;
  county: string;
  country: string;
  postCode: string;
  daytimePhone: string;
  eveningPhone: string;
  mobile: string;
  dob: Date;
  updatedBy: string;
  updatedOn: string;
}

Answer 1

我已经能够通过在子组件中执行以下操作来解决此问题：

export class MyDetailsOverviewComponent implements OnInit {

    private person: Person;
    @Input() set personInput (person: Person) {
    this.person = Object.assign({}, person);
    this.person.dob = new Date(person.dob);
  }

  @Input() member: Member;

  @Input() personIsMember: boolean;


  constructor(private route: ActivatedRoute, private authService: AuthenticationService) {

  }


  ngOnInit() {
    console.log('PERSON CHILD DATE: ' + this.person.dob);
  }

}

这是正确的方法吗？