单击行后插入动态创建组件 [英] Insert dynamically create component after clicked row

问题描述

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

我的表格包含带有操作按钮的行，单击该按钮我将在该行之后调用角度函数和加载组件.

这是表格代码

<div class="col">名称</div><div class="col">描述</div><ng-template #dynamic></ng-template>

动态组件代码

Service.ts从 './dynamic.component' 导入 { DynamicComponent }@Injectable()出口类服务{工厂解析器；根视图容器；构造函数(@Inject(ComponentFactoryResolver) factoryResolver){this.factoryResolver = factoryResolver}setRootViewContainerRef(viewContainerRef) {this.rootViewContainer = viewContainerRef}添加动态组件(){const factory = this.factoryResolver.resolveComponentFactory(动态组件)const 组件 = 工厂.create(this.rootViewContainer.parentInjector)this.rootViewContainer.insert(component.hostView)}}

这是组件文件.

dynamic.component.ts

import { Component } from '@angular/core'@成分({选择器:'动态组件'，模板:`<div class="row" ><div class="col">数据</div><div class="col">数据</div><div class="col">数据</div><div class="col">数据</div><div class="col">数据</div><div class="col">数据</div><div class="col">数据</div><ng-template #dynamic></ng-template>

`})导出类 DynamicComponent { }

用于渲染动态组件的函数

@ViewChild('动态', {阅读:ViewContainerRef}) viewContainerRef: ViewContainerRef加载子组件(){this.service.setRootViewContainerRef(this.viewContainerRef)this.service.addDynamicComponent()}

现在它附加在任何行的相同 div 中

我想在点击行后附加它

请帮忙..

解决方案

Angular 中的 ng-template 就像一个幽灵元素，即它从不直接显示.检查此链接.

更新:

您总是将模板插入第一行，因为您使用了 @ViewChild.@ViewChild 查找模板中的第一个元素.

尝试改用 @ViewChildren.

参考以下更改:

<div class="row"><div class="col" ><button class="btn btn-sm" (click)="loadChildComponent(i)">+</button>

<div class="col">名称</div><div class="col">描述</div>

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

</ng-容器>

JS 变化:

@ViewChildren('dynamic', { read: ViewContainerRef }) viewContainerRef: QueryList加载子组件(索引){this.service.setRootViewContainerRef(this.viewContainerRef.toArray()[index])this.service.addDynamicComponent()}

希望这有帮助:)

I am working on solution in which i want to append dynamically created component after clicked row

I have table consist rows with action button on click of which i will call angular function and load component after that row.

Here is table code

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

Code for dynamic components

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

Here is component file.

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

Functions used to render dynamic component

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

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

Right now its appending in same div for any of rows

i would like to append it after clicked row

Please help..

解决方案

The ng-template in Angular acts like a ghost element i.e. it is never displayed directly. Check this link.

Update:

You are having the template inserted with first row always because you have used @ViewChild. @ViewChild looks for the first element in the template.

Try using @ViewChildren instead.

Refer the following changes:

<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 changes:

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

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

Hope this helps :)

这篇关于单击行后插入动态创建组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！