Question

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

它看起来像那样：

@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部分外，基本上它正在工作。当我splice时，数据模型在再次呈现container并且一切都很乱之后获取新索引，数据不会sit应该在哪里。我也考虑过发送数据并让组件管理它，但我不确定这是正确的做法，甚至不知道怎么做。

如果不清楚，我会很感激您的建议并添加信息。

更新1： 添加plnkr。

正如您所看到的，我正在添加元素，当我尝试删除它们时，它会从底部删除。我必须知道我的基本方法是否良好，然后再想出如何删除和更新我的数据数组。

在ng-container中创建动态组件，添加ng-template并监视ngModel

0 个答案: