单击行后插入动态创建组件

Posted 2023-03-13

【中文标题】单击行后插入动态创建组件

【英文标题】：Insert dynamically create component after clicked row

【发布时间】：2019-03-03 07:14:08

【问题描述】：

我正在研究解决方案，我想在单击行后附加动态创建的组件

我的表格由带有点击操作按钮的行组成，我将在该行之后调用角度函数并加载组件。

这是表格代码

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

我想在点击行后追加它

请帮忙..

【问题讨论】：

据我了解，你可以得到动态模板，但它不是单独显示的，对吧？

【参考方案1】：

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

希望这会有所帮助:)

【讨论】：

我会努力实现的！

我的问题是这个组件总是附加在相同的位置，而不是各自点击的行

不，这不再起作用问题是新加载的内容附加在同一个地方，我想要实现的是，假设如果我点击第一行，则根据报告数据绘制 10 行，动态组件应该出现在第一行之后，如果我点击第 8 行，组件应该再次出现在第 8 行之后。现在它被添加到同一个地方而不考虑点击的行

@RipulChhabra 检查更新的答案。我希望这会有所帮助。

是的，对我来说几乎没有什么变化 @ViewChildren('dynamic', read: ViewContainerRef ) viewContainerRef: QueryList