我正面临着尝试将数据从Ionic页面传递到动态加载组件的问题 . 基本上,我有一个页面,允许您选择项目并将其添加到您的购物卡 . 购物车中的每个项目都是动态加载的组件 . 我有功能代码将动态组件添加到购物车页面,但我不知道如何在加载时将唯一数据传递给每个组件 . 在页面中,您搜索并添加产品 . 然后,我想用所选产品中的信息填充购物车项目 . 也许这对于Angular / Ionic来说很容易,但我对这两者都没有很强的了解,而且我的搜索结果也没用 . 我的简化代码如下所示 .
import { Component, Injectable, Injector, ComponentFactoryResolver, EmbeddedViewRef, ApplicationRef } from '@angular/core';
import { CartItemComponent } from '../../components/cart-item/cart-item';
@IonicPage()
@Component({
selector: 'page-new-ticket',
templateUrl: 'new-ticket.html',
})
export class NewTicketPage {
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private appRef: ApplicationRef,
private injector: Injector
) { }
addItem() {
const componentRef = this.componentFactoryResolver
.resolveComponentFactory(CartItemComponent)
.create(this.injector);
this.appRef.attachView(componentRef.hostView);
const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
document.getElementsByClassName('cart-list')[0].appendChild(domElem);
}
}
然后我想将一个对象传递给每个购物车项目 . 例如,列表中的每个项目都将传递给CartItemComponent的新实例 . 数据可能如下所示 .
{
"item_1": {
"field_1": "...",
"field_2": "...",
"field_3": "..."
},
"item_2": {
"field_1": "...",
"field_2": "...",
"field_3": "..."
},
"item_3": {
"field_1": "...",
"field_2": "...",
"field_3": "..."
}
}
这甚至是正确的方法吗?页面是否应该跟踪购物车项目,或者每个购物车项目是否应该跟踪自己?我不知道最佳做法应该是什么 .