Question

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

此对象（人）具有属性/字段'dob'，其类型为Date。

这是父组件构造函数从路径解析中获取人员，然后将其传递给子组件@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>

这是获取person对象并分配从.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控制台的输出显示：

PERSON PARENT DATE：2016年12月15日星期四00:00:00 GMT + 0000（GMT标准时间）

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

PERSON CHILD DATE：null

除了dob属性之外，子对象本身是有效的。这是@Input（）成员从child打印到控制台。

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对象传递给childs @Input（）person成员时将其复制到person对象？

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

提前致谢。

人物对象模型如下：

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

}

这是正确的做法吗？

具有Date类型属性的对象的Angular 2 @Input（）装饰器

1 个答案: