Html 从另一个组件动态创建组件

我正在尝试创建一个动态加载项目的购物车

边栏组件.TS

购物车组件.HTML

StoreItems组件.HTML

---

我错过了什么？

我尝试过类似的东西，它对我来说很好

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[my-host]',
})
export class MyHostDirective {
  constructor(public viewContainerRef: ViewContainerRef) {
  }
}

import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
export class YourComponent{
 @ViewChild(MyHostDirective) myHost: MyHostDirective;
ngAfterViewInit() {
    this.renderDynamicComponents();
  }


  renderDynamicComponents() {
    let component = this.widgetsStoreFactory.getWidgetComponent("ComponentName");
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
    let viewContainerRef = this.myHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<IModel>componentRef.instance).YourProperty = "DataToPass";


  }
}


<ng-template my-host>


</ng-template>

最后，请将动态组件添加到模块的entryComponents中

---

何时何地调用addItem？请查看我的编辑为什么使用ng模板？你能试试ng集装箱吗？当然，我可以试试。但问题是，SidebarComponent中的ViewChild在注入StoreItems后无法被识别。否则它会工作。SidebarComponent是如何创建和注入的？你能创造一个普朗克吗？很难理解您的设置

<ng-template #cartContainer></ng-template>

export class CartComponent {
  @Input() public type = 'success';
  @Output() output = new EventEmitter();
}

<div id="cd-cart" class="speed-in">
<h1 (click)="output.next('output')">Cart {{ type | json}}</h1>
<ul class="cd-cart-items" style="height: 50vh!important;">
<li *ngFor="let CartItem of CartItems; let index = i;">
  <span class="cd-qty">1x</span> CRISTOMORADO MAIZMORADO KG
  <div class="cd-price">S/.7.00</div>
  <a href="#0" class="cd-item-remove cd-img-replace">Remove</a>
</li>

constructor(private _sidebarComponent: SidebarComponent){}

private addItem(key: string, value: object) {
  this._sidebarComponent.createComponent(value);
}

<div class="ui-g">
<div *ngFor="let Item of Items" class="ui-g-2">
<a href="javascript:;" (click)="addItem('cart', Items)"><md-card class="item-card">
  <div class="ui-g-2-top">{{ Item.Item_Description }}</div>
  <div class="ui-g-2-bottom">{{ MONEY_CHAR }}{{ Item.ITEM_Sale_Price | number : '1.2-2'}}</div>
</md-card></a>
</div>

<app-sidebar></app-sidebar>

Cannot read property 'clear' of undefined

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[my-host]',
})
export class MyHostDirective {
  constructor(public viewContainerRef: ViewContainerRef) {
  }
}

import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
export class YourComponent{
 @ViewChild(MyHostDirective) myHost: MyHostDirective;
ngAfterViewInit() {
    this.renderDynamicComponents();
  }


  renderDynamicComponents() {
    let component = this.widgetsStoreFactory.getWidgetComponent("ComponentName");
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
    let viewContainerRef = this.myHost.viewContainerRef;
    viewContainerRef.clear();
    let componentRef = viewContainerRef.createComponent(componentFactory);
    (<IModel>componentRef.instance).YourProperty = "DataToPass";


  }
}


<ng-template my-host>


</ng-template>