Angular 2:在specific/nth位置动态添加组件
Angular 2: Add components at specific/nth position dynamically
无法在特定索引处添加组件。例如,在 plunker link 下面。
PlunkerAddRemoveComponents
在这里,我只能在第一次添加特定索引处的组件。
export class AddRemoveDynamic {
idx: number = 0;
constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef) { }
add() {
this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => {
ref.instance._ref = ref;
ref.instance._idx = this.idx++;
});
}
}
我的场景是:
- 点击添加组件按钮 3 次。它将创建 3 行
连续。
- 然后点击第二行的添加按钮,它会创建另一行。
- 再次点击同一个按钮,将创建下一个组件
行
问题来了,我想每次都在添加按钮行旁边创建组件。
DynamicComponentLoader
已弃用。
我创建了一个使用 ViewContainerRef.createComponent()
的示例,允许在应添加元素的位置添加索引:
class DynamicCmp {
_ref: ComponentRef;
_idx: number;
constructor(private resolver: ComponentResolver, private location:ViewContainerRef) { }
remove() {
this._ref.dispose();
}
add1() {
this.resolver.resolveComponent(DynamicCmp).then((factory:ComponentFactory<any>) => {
let ref = this.location.createComponent(factory, 0)
ref.instance._ref = ref;
ref.instance._idx = this._idx++;
});
}
}
无法在特定索引处添加组件。例如,在 plunker link 下面。 PlunkerAddRemoveComponents
在这里,我只能在第一次添加特定索引处的组件。
export class AddRemoveDynamic {
idx: number = 0;
constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef) { }
add() {
this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => {
ref.instance._ref = ref;
ref.instance._idx = this.idx++;
});
}
}
我的场景是:
- 点击添加组件按钮 3 次。它将创建 3 行 连续。
- 然后点击第二行的添加按钮,它会创建另一行。
- 再次点击同一个按钮,将创建下一个组件 行
问题来了,我想每次都在添加按钮行旁边创建组件。
DynamicComponentLoader
已弃用。
我创建了一个使用 ViewContainerRef.createComponent()
的示例,允许在应添加元素的位置添加索引:
class DynamicCmp {
_ref: ComponentRef;
_idx: number;
constructor(private resolver: ComponentResolver, private location:ViewContainerRef) { }
remove() {
this._ref.dispose();
}
add1() {
this.resolver.resolveComponent(DynamicCmp).then((factory:ComponentFactory<any>) => {
let ref = this.location.createComponent(factory, 0)
ref.instance._ref = ref;
ref.instance._idx = this._idx++;
});
}
}