동적으로 추가 된 Angular2 구성 요소는 렌더링되지 않지만 정적으로 추가됩니다.

Question

사용자가 단추를 클릭 할 때 다음 메서드를 실행하고 있습니다.

내 마크 업은 다음과 같습니다.

<generic1>woosh</generic1> 
<div #privs></div> 

generic1라는 부성분 수입 모듈 존재 물론 이와 같이 선언된다.

import { Component } from "@angular/core"; 
@Component({ 
    selector: "generic1", 
    template: "<div>mamba...</div>" 
}) 
export class Generic1 { } 

내가 얻는 동작은 마크 업에서 통계적으로 만들어진 것입니다. 동적으로 추가되지 않습니다. 조사한 DOM에 따르면 generic1 태그가 추가되었지만 Angular로 렌더링되지 않았습니다. 텍스트 (yey! 및 태그는 표시하지만 구성 요소는 표시하지 않음)가 표시됩니다.

무엇이 누락 되었습니까?

예를 들어서 봤지만 설정에 문제가있는 것을 보지 못했습니다. 내 범위를 벗어나는 무언가 여야합니다 ...

Answer 1

실제로 동적 구성 요소를 만들지 않습니다. Angular로 렌더링되지 않은 추가 HTML을 삽입하고 있습니다. HTML과 텍스트는 템플릿에 삽입 할 때 위생 처리되므로 렌더링 된 구성 요소를 얻지 못합니다.

This answer에는 동적 구성 요소 설정에 대한 매우 자세한 설명이 있습니다. 그러나 필요한 복사 및 붙여 넣기 솔루션이 아닙니다. documentation on Angular.io에는 동적 구성 요소 로더의 좋은 예가 있습니다. 기본적으로 Angular 구성 요소를 해결하고 빌드하려면 ComponentFactoryResolver이 필요합니다. Angular.io 워드 프로세서의 예에서, 진짜 마법이 기능에서 발생합니다

loadComponent() { 
    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length; 
    let adItem = this.ads[this.currentAddIndex]; 
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component); 
    let viewContainerRef = this.adHost.viewContainerRef; 
    viewContainerRef.clear(); 
    let componentRef = viewContainerRef.createComponent(componentFactory); 
    (<AdComponent>componentRef.instance).data = adItem.data; 
    } 

그것은, 해결하고 구성 요소를 구축하기 위해 componentFactoryResolver를 사용 this.ads에 저장된 구성 요소 목록에서 구성 요소를 검색합니다. viewContainerRef을 검색하고 그 위에 구성 요소를 작성합니다.

올바른 방향으로 안내 할 수있는 희망.