我有一个像这样的人。
<div *ngFor="let object of objects; let i = index" class="discover__col">
使用像thins
这样的事件绑定<a (click)='onOpen(object)'>Details</a>
我有一个像这样的动态模态。
dynamicModal(object): void {
const modal$ = this.modalService.create(SharedModule, DynamicModalComponent, {
title: object.title,
desc: object.desc
}
我得到了tile并且desc未定义。
如何传递我在ngFor循环中迭代的对象?
ModalService
@Injectable()
export class ModalService {
private vcRef: ViewContainerRef;
private injector: Injector;
public activeInstances = 0;
constructor(private compiler: Compiler) {
}
registerViewContainerRef(vcRef: ViewContainerRef): void {
this.vcRef = vcRef;
}
registerInjector(injector: Injector): void {
this.injector = injector;
}
create<T>(module: any, component: any, parameters?: Object):
Observable<ComponentRef<T>> {
const componentRef$ = new ReplaySubject();
this.compiler.compileModuleAndAllComponentsAsync(module)
.then(factory => {
const componentFactory = factory.componentFactories.filter(item => item.componentType === component)[0];
const childInjector = ReflectiveInjector.resolveAndCreate([], this.injector);
const componentRef = this.vcRef.createComponent(componentFactory, 0, childInjector);
Object.assign(componentRef.instance, parameters); // pass the @Input parameters to the instance
this.activeInstances ++;
componentRef.instance["componentIndex"] = this.activeInstances;
componentRef.instance["destroy"] = () => {
this.activeInstances --;
componentRef.destroy();
};
componentRef$.next(componentRef);
componentRef$.complete();
});
return <Observable<ComponentRef<T>>> componentRef$.asObservable();
}
}
结束服务
这是一个对象{
'title':'test',
'desc':'test2',
}
这是父母
<objects [objects]='objects' (open)='objectModal(object)'></objects>
这是子组件
<div *ngFor='object of objects'>
<object-component (click)='onOpen(object)'></object-component>
</div>
@Output() open: EventEmitter<Object> = new EventEmitter<Object>();
onOpen(object) {
this.open.emit(object);
}
如果我title: 'test',
title: 'test2'
它工作正常。
但是,我需要从被点击的ngFor对象中获取信息。基本上,我不是如何将信息传递给父,而不是索引,而是实际的对象本身。所以我可以这样做,它没有被定义。
title: service.title,
title: service.desc,