각도 2 및 4 - 생성 된 구성 요소를 동적으로 할당하십시오.

Question

끌어서 놓기 때문에 페이지에서 요소를 끌어다 놓을 때 : 1) 구성 요소를 생성하십시오. 2) 내가 방금 떨어 뜨린 div.

드래그 앤 드롭으로 이미 생성되어, 나는 ViewContainerRef

HTML

<div #parent></div> 

TS

@ViewChild('parent', { read: ViewContainerRef }) parent: ViewContainerRef; 

let childComponent = this._componentFactoryResolver.resolveComponentFactory(TextComponent); 
let anotherChildComponent = this._componentFactoryResolver.resolveComponentFactory(ullist) 
this.parent.createComponent(childComponent); 
this.parent.createComponent(anotherChildComponent); 

를 사용하여 compoenent을 만드는 방법을 알아 냈 무엇 내가 붙어있어 내가 할 수 없다는 것이다. 같음 마찬가지로 구성 요소를 삭제할 때 이전에 삭제 된 하나의 페이지는 동일한 #parent를 공유하므로 업데이트됩니다.

내가 생성 한 구성 요소를 내가 클릭 한 것에 어떻게 할당 할 수 있는지 파악하려고했습니다. . 아마 radom 번호를 생성하고 * ngComponentOutlet에 임의의 번호를 삽입하고 생성 된 번호를 클릭하고 생성 된 구성 요소를 할당 할 때 클릭하면됩니까?

내 앱은 각도 4로 작성되어 있으므로 ngComponentOutlet을 작성하고 4 개의 div가있는 플 런커를 만듭니다. div를 클릭하면 구성 요소를 할당하고 싶습니다. 또는 삽입하십시오. 3 div가있는 방법은 ngFor 루프을 통해 배열에서 생성됩니다.

내가 얻고 싶은 것은 DIV를 클릭하면 해당 특정 (특정 DIV를 클릭하면 ngComponentOutlet을 가짐)을 말할 수 있습니다. ngComponentOutlet 어떤 구성 요소를 주입해야하는지 나타냅니다. https://plnkr.co/edit/JvXBLOVaeaYO5bmMQa6a?p=preview

Answer 1

먼저 plnkr에 오타가 : 여기

는 plunker입니까? 당신은이 :

<div *ngFor="let item of items" (click)="loadComponent(item)"> 
    ... 
    <ng-container *ngComponentOutlet="items.componentSlider"></ng-container> 

는, 항목항목 .componentSlider되지해야 하는가?

items:Array<any> = [ 
    { 
     name: 'slider' 
     componentSlider: sliderComponent, 
     isLoaded: false 
    }, 
    { 
     name: 'user' 
     componentSlider: usersComponent, 
     isLoaded: false 
    }, 
    { 
     name: 'slider' 
     componentSlider: sliderComponent, 
     isLoaded: false 
    }, 
    { 
     name: 'alert danger' 
     componentSlider: AlertDangerComponent, 
     isLoaded: false 
    } 
    ] 

이 그런 다음 loadComponent 방법 업데이트 :

loadComponent(item){ 
    item.isLoaded = true; 
} 

을 그리고 템플릿 업데이트 :

을, 각 항목에 isLoaded 같은 추가 속성을 첨부 할 수 있다고 말했다

---

<div *ngFor="let item of items" (click)="loadComponent(item)"> 
    <ng-container *ngIf="item.isLoaded"> 
     <ng-container *ngComponentOutlet="item.componentSlider"></ng-container> 
    </ng-container> 
</div> 

여기에 plnkr입니다. 구성 요소는 클릭 된 div 안에 생성됩니다. 이것이 당신이 필요로하는 것을 성취합니까?