У меня есть уникальный сценарий, в котором мне нужно создавать дочерние компоненты, которые должны получать некоторую информацию из моего бэкэнда при их создании. Мой процесс выглядит следующим образом:
1) файл шаблона родительского компонента имеет *ngFor, который создает n чисел дочерних компонентов
2) в директиве создания дочернего компонента я включаю два источника событий для прослушивания родительского (один для создания, чтобы добавить в массив, а другой для удаления)
3) когда дочерний компонент запускается, я собираю то, что мне нужно от моего внутреннего сервера для этого компонента, а затем использую генератор событий создания из ngOnInit(), чтобы сообщить родителю, что он готов.
4) потом родитель добавляет этот дочерний компонент в свой массив потомков
5) внутри дочернего компонента есть ссылка для удаления этого дочернего элемента, который также передает это событие родительскому элементу, родительский элемент удаляет этот экземпляр из массива.
Все вышеперечисленное работает правильно, но мне также нужно удалить фактический HTML из шаблона родителя, когда дочерний элемент пропускает событие удаления. Я посмотрел здесь: Динамическое добавление и удаление компонентов в Angular , и это то, что мне нужно, но предполагается, что дочерние компоненты генерируются в коде, а не в шаблоне.
Я предполагаю, что мне нужно использовать что-то похожее на это и добавить ссылки на мои дочерние компоненты в мой контейнер @ViewChild, но я не вижу методов на container, которые позволили бы мне AddFromTemplate() и т. Д.
Вот код:
Родительский компонент (ts):
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() {
}
}
и соответствующий ему шаблон HTML:
<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);
}
}
я должен использовать этот @ViewChild() подход? Есть ли что-то еще, что я могу сделать? Могу ли я удалить дочерний компонент из собственной реализации после отправки события удаления? IE: что-то вроде this.destroy().
ТИА