我正在研究一种解决方案,其中我想在单击行后追加动态创建的组件

我有包含动作按钮的表格行,单击该按钮后,我将调用角度函数并加载组件。

这是表代码

<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)
  }
}


这是组件文件。

动态组件

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中追加

我想在点击行后追加

请帮忙..

最佳答案

Angular中的ng-template就像一个幽灵元素,即永远不会直接显示。选中此link

更新:

总是因为使用@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()
    }


希望这可以帮助 :)

09-10 11:52
查看更多