本文介绍了单击行后插入动态创建组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在研究我想在点击行后附加动态创建的组件的解决方案
我的表格包含带有操作按钮的行,单击该按钮我将在该行之后调用角度函数和加载组件.
这是表格代码
<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 :)
这篇关于单击行后插入动态创建组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!