我有一个独特的场景,我需要创建子组件,这些子组件在创建时需要从后端获取一些信息。我的流程如下:
1)父组件的模板文件具有一个*ngFor
,可创建n个子组件
2)在子组件的创建指令中,我包括两个事件发射器以监听父级(一个用于创建添加到数组,一个用于删除添加)
3)旋转子组件时,我从后端收集该组件所需的东西,然后从ngOnInit()
内部使用创建事件发射器通知父组件已准备就绪。
4)然后,父级将该子级组件添加到其子级数组中
5)在子组件中,有一个链接可以删除该子组件,该子组件也会向父对象发出该事件,父组件将从数组中删除该实例。
以上所有方法均正常运行,但是当孩子通过remove事件时,我还需要从父模板中删除实际的HTML。我在这里查看:Dynamically ADDING and REMOVING Components in Angular,这是我所需要的,但它假定子组件是在代码中生成的,而不是在模板中生成的。
我假设我需要使用与之类似的东西,并将子组件引用添加到我的@ViewChild
容器中,但是我没有看到container
上允许我{{1} }等。
以下是一些代码:
父项(ts):
AddFromTemplate()
及其相应的模板HTML:
export class MatParentComponent implements OnInit {
constructor(private someService: SomeService) { }
@ViewChild('container', { read: ViewContainerRef, static: false }) container: ViewContainerRef;
// dunno how to use container in this example to add references to child components for removal from HTML later
matChildComponents: MatChildComponent[] = [];
addInstanceToCollection(matChildComponent: MatChildComponent): void {
this.matChildComponents.push(matChildComponent);
}
removeInstanceFromCollection(matChildComponent: MatChildComponent): void {
let i: number = 0;
for (let i = 0; i < this.matChildComponents.length; i++) {
if (this.matChildComponents[i] == matChildComponent) {
console.log(i);
this.matChildComponents.splice(i, 1);
break;
}
}
}
ngOnInit() {
}
}
子组件(ts):
<mat-child *ngFor="let instance of instances"
[someProp1]="instance.someProp1"
[someProp2]="instance.someProp2"
(instanceCreatedEmitter)="addInstanceToCollection($event)"
(instanceRemoveEmitter)="removeInstanceFromCollection($event)"></mat-child>
我应该使用这种export class MatChildComponent implements OnInit {
@Input() someProp1: string;
@Input() someProp2: string;
@Output() instanceCreatedEmitter = new EventEmitter<MatChildComponent>();
@Output() instanceRemoveEmitter = new EventEmitter<MatChildComponent>();
constructor() { }
removeThisComponent(): void {
this.instanceRemoveEmitter.emit(this);
}
ngOnInit() {
// do my stuff from back end to fully load up this component
this.componentLoaded = true;
// now emit this instance back to the parent so they can add it to their collection
this.instanceCreatedEmitter.emit(this);
}
}
方法吗?还有什么我可以做的吗?发出移除事件后,能否从子组件中移除子组件? IE:类似@ViewChild()
。
TIA
答案 0 :(得分:0)
解决了这个问题。在上面绘制的图片中,我只需要从我在父容器的HTML模板中循环的instances
数组中删除该项目即可。