1

我创建了一个动态组件，我可以从外部向它注入模板。我的目标是能够注入任何模板，在组件内复制这些模板，并以两种方式将数据绑定到它以获取数据更改。

它看起来像这样：

@Component({
  selector: 'app-custom-container',
  templateUrl: './custom-container.component.html',
  styleUrls: ['./custom-container.component.css']
})
export class CustomContainerComponent implements OnInit {
  @Input() template: TemplateRef<any>;
  @Input() addButtonLabel: string;
  
  templates: Array<TemplateRef<any>> = [];
  constructor() { }

  ngOnInit() {
    this.templates.push(this.template);
  }
}

HTML，我有一个add button按钮可以动态添加更多模板，我有一个trash button删除模板：

<ng-container *ngFor="let template of templates; let index = index; let last = last;">
    <button type="button" (click)="templates.splice(index, 1);" class="trash-button"></button>
    <ng-container *ngTemplateOutlet="template; context:{index:index}"></ng-container>
</ng-container>
<div (click)="templates.push(template)" class="add-button">{{addButtonLabel}}</div>

我像这样使用这个组件：

<app-custom-container" [template]="tpl" addButtonLabel="ADD TEMPLATE"  addButtonClass="add-butto"></app-custom-container>
<ng-template #tpl let-index="index">
    <p-dropdown [options]="mylist" [autoWidth]="false" [(ngModel)]="myData[index]" name="myName{{index}}"
        required>
    </p-dropdown>
</ng-template>

我正在使用 ng-prime，因此p-dropdown.

所以我想要的是能够创建那些动态组件，向其中注入任何模板，并能够使用这个动态组件复制这个模板。此外，我希望从下拉列表中选择的数据插入到我的数据中，因此ngModel.

我遇到的问题：

  • 我不确定这是否是实现我目标的最佳设计。回复的index那个，对我来说似乎很尴尬。
  • 基本上它正在工作，除了splice部分。当我spliceing 时，数据模型在再次渲染后获取新索引container，一切都一团糟，数据不在sit应有的位置。我也考虑过发送数据并让组件管理它，但我不确定这是正确的做法，甚至不确定如何去做。

如果有不清楚的地方，我将不胜感激您的建议并添加信息。

更新 1： 添加plnkr。

如您所见，我正在添加元素，当我尝试删除它们时，它会从底部删除。我必须知道我的基本方法是否良好，然后才能确定如何相应地删除和更新我的数据数组。

4

0 回答 0