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

【问题标题】：What is the proper way of cloning child component's template in angular 5在角度5中克隆子组件模板的正确方法是什么
【发布时间】：2018-02-28 00:38:14
【问题描述】：

我是 Angular 新手，我对克隆组件模板的概念感到困惑。

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

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

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

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;

我需要有关此概念的帮助，但不知道如何解决。请帮助我采取正确的方法。

问候

【问题讨论】：

标签： angular

【解决方案1】：

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

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

【讨论】：