Вставить динамически создать компонент после щелчка строки

Question

Я работаю над решением, в котором я хочу добавить динамически созданный компонент после щелчка строки

У меня есть строки таблицы с кнопкой действия, при нажатии которой я буду вызывать угловую функцию и загружать компонент после этой строки.

Вот код таблицы

<div class="row" *ngFor="let rData of reportData; let i = index;" >
        <div class="col" >
            <button class="btn btn-sm" (click)="loadChildComponent()">+</button>
        </div>
        <div class="col">Name</div>
        <div class="col">Description</div>
        <ng-template #dynamic></ng-template>

</div>

Код для динамических компонентов

Service.ts


import { DynamicComponent } from './dynamic.component'
@Injectable()
export class Service {
  factoryResolver;
  rootViewContainer; 
  constructor(@Inject(ComponentFactoryResolver) factoryResolver) {
    this.factoryResolver = factoryResolver
  }
  setRootViewContainerRef(viewContainerRef) {
    this.rootViewContainer = viewContainerRef
  }
  addDynamicComponent() {
    const factory = this.factoryResolver
                        .resolveComponentFactory(DynamicComponent)

    const component = factory
      .create(this.rootViewContainer.parentInjector)

    this.rootViewContainer.insert(component.hostView)
  }
}

Вот файл компонента.

dynamic.component.ts

import { Component } from '@angular/core'
@Component({
  selector: 'dynamic-component',
  template: `<div class="row"  >
            <div class="col">Data</div>
            <div class="col">Data</div>
            <div class="col">Data</div>
            <div class="col">Data</div>
            <div class="col">Data</div>
            <div class="col">Data</div>
            <div class="col">Data</div>
    <ng-template #dynamic></ng-template>
    </div>`
})
export class DynamicComponent { }

Функции, используемые для рендеринга динамического компонента

@ViewChild('dynamic', { 
      read: ViewContainerRef 
    }) viewContainerRef: ViewContainerRef

loadChildComponent() {
        this.service.setRootViewContainerRef(this.viewContainerRef)
        this.service.addDynamicComponent()
    }

Сейчас его добавление в тот же div для любой из строк

Я хотел бы добавить его после щелчка строки

Пожалуйста, помогите ..

Answer 1

ng-template в Angular действует как элемент-призрак, т.е. он никогда не отображается напрямую.Проверьте эту ссылку .

Обновление:

Шаблон всегда вставляется с первой строкой, потому что вы использовали @ViewChild.@ViewChild ищет первый элемент в шаблоне.

Попробуйте вместо этого использовать @ViewChildren.

См. Следующие изменения:

<ng-container *ngFor="let rData of reportData; let i = index;">
    <div class="row">
        <div class="col" >
            <button class="btn btn-sm" (click)="loadChildComponent(i)">+</button>
        </div>
        <div class="col">Name</div>
        <div class="col">Description</div>

    </div>
    <div class="row">
        <ng-template #dynamic></ng-template>
    </div>
</ng-container>

Изменения в JS:

@ViewChildren('dynamic', { read: ViewContainerRef }) viewContainerRef: QueryList<ViewContainerRef>

loadChildComponent(index) {
        this.service.setRootViewContainerRef(this.viewContainerRef.toArray()[index])
        this.service.addDynamicComponent()
    }

Надеюсь, это поможет:)