我正面临着尝试将数据从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": "..."
    }
}

这甚至是正确的方法吗?页面是否应该跟踪购物车项目,或者每个购物车项目是否应该跟踪自己?我不知道最佳做法应该是什么 .