Question

我是角色新手，我坚持克隆组件模板的概念。

所以我有一个RequestComponent（父组件），它有一个方法（绑定一个按钮点击）来加载DestinationComponent的模板（子组件）。对于单个请求，可以多次调用该方法，这意味着可能有多个目标。

addDestination(){
    let nextDestinationArr = {
      'nextDestinationLat': '',
      'nextDestinationLng': '',
      'nextDestinationAddress': '',
      'nextDestinationFullname': '',
      'nextDestinationMobile': '',
      'nextDestinationDescription': ''
    };
    this.nextDestinations.push(nextDestinationArr);    
  }

目标模板有一个接受目标详细信息的表单，它适用于第一个目标但由于可能有多个目标，问题就会出现。

export class DestinationsComponent {

  nextDestinationLat: string;
  nextDestinationLng: string;
  nextDestinationAddress: string;
  nextDestinationFullname: string;
  nextDestinationMobile: string;
  nextDestinationDescription: string;

  constructor() {
  }
}

然后在请求模板中：

<div *ngFor="let nextDestination of nextDestinations">
  <destinations></destinations>
</div>

填写新的目标表单会更新以前完全符合逻辑的属性。听起来我需要克隆组件，使新组件及其模板具有新的（以增量方式后缀）属性集来匹配。类似的东西：

nextDestinationLat2: string;
nextDestinationLng2: string;
nextDestinationAddress2: string;
nextDestinationFullname2: string;
nextDestinationMobile2: string;
nextDestinationDescription2: string;

我需要这个概念的帮助，不知道如何解决这个问题。请帮助我采取适当的方法。

此致

Answer 1

也许我误解了这个问题，但你应该克隆这个对象：

 this.nextDestinations.push(Object.assign({}, nextDestinationArr));

在角度5中克隆子组件模板的正确方法是什么

1 个答案: