他のコンポーネントからコンポーネントを動的に作成する

Question

アイテムを動的に読み込むカートを作成しようとしています。

サイドバーコンポーネント.TS

@ViewChild('cartContainer', { read: ViewContainerRef }) public container; 
public componentRef: ComponentRef<any>; 

public createComponent(type: any) { 
    this.container.clear(); 
    const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(CartComponent); 
    this.componentRef = this.container.createComponent(factory); 
    this.componentRef.instance.type = type; 
    this.componentRef.instance.output.subscribe(event => console.log(event)); 
} 

サイドバーコンポーネント.HTML

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

カート部品.TS

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

カート部品.HTML

<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> 

StoreItemsコンポーネント.TS

constructor(private _sidebarComponent: SidebarComponent){} 

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

StoreItemsコンポーネント.HTML

<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> 

しかし

LayoutComponent .HTML

<app-sidebar></app-sidebar> 

、私はのaddItem（）を呼び出し、それがにcreateComponentを（呼び出す）、それは（私のViewChildを認識しない）

Cannot read property 'clear' of undefined 

私は何が欠けていますか？

Answer 1

私はこのような何かを試してみました、それはとき

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に動的コンポーネントを追加してください

https://angular.io/guide/dynamic-component-loader

https://fromjami.com/2017/06/26/load-components-dynamically-at-runtime-in-angular-4/