Tạo thành phần góc 2 với nội dung ng động

Question

Tôi muốn thiết lập phần thân của <ng-content> trong khi khởi tạo thành phần động sử dụng ComponentFactoryResolver.

Tôi thấy rằng tôi có thể truy cập vào đầu vào & đầu ra sử dụng ComponentRef, nhưng không phải là cách để đặt <ng-content>. thành phần

Xin lưu ý <ng-content> tôi đang lập kế hoạch về thiết lập có thể chứa văn bản đơn giản/SPAN có thể tự động tạo ra

@Component({ 
    selector: 'app-component-to-project', 
    template: `<ng-content></ng-content>` 
}) 
export class ComponentToProject implements AfterContentInit { 

    ngAfterContentInit() { 
     // We will do something important with content here 
    } 

} 


@Directive({ 
    selector: 'appProjectionMarker' 
}) 
export class ProjectionMarkerDirective implements OnInit { 

    constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { 
    } 

    ngOnInit() { 
     const componentFactory: ComponentFactory<ComponentToProject> = this.componentFactoryResolver.resolveComponentFactory(ComponentToProject); 
     const componentRef: ComponentRef<ComponentToProject> = this.viewContainerRef.createComponent(componentFactory); 
     // Question: How to set content before the child's afterContentInit is invoked 
    } 

} 

@Component({ 
    selector: 'appTestComponent', 
    template: `<div appProjectionMarker></div>` 
}) 
export class TestComponent {} 

Answer 1

Có projectableNodes tham số cho phương pháp vcRef.createComponent

createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>; 

Bạn có thể sử dụng nó để tự động tiêm một thành phần khác.

Hãy nói rằng chúng ta có các thành phần sau đây

@Component({ 
    selector: 'card', 
    template: ` 
     <div class="card__top"> 
      <h2>Creating a angular2 component with ng-content dynamically</h2> 
     </div> 
     <div class="card__body"> 
      <ng-content></ng-content> 
     </div> 
     <div class="card__bottom"> 
      <ng-content></ng-content> 
     </div> 
    ` 
}) 
export class CardComponent {} 

Chúng tôi muốn tạo ra nó tự động và chèn một số điều khiển để ng-content địa điểm của nó. Nó có thể được thực hiện như sau:

const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent); 
const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent); 

let bodyRef = this.vcRef.createComponent(bodyFactory); 
let footerRef = this.vcRef.createComponent(footerFactory); 

const cardFactory = this.cfr.resolveComponentFactory(CardComponent); 

const cardRef = this.vcRef.createComponent(
    cardFactory, 
    0, 
    undefined, 
    [ 
     [bodyRef.location.nativeElement], 
     [footerRef.location.nativeElement] 
    ] 
); 

Plunker Example

Xem thêm

• Why is projectableNodes an any[][]?

• Pawel Kozlowski - Reactive parenting with Angular 2 - NG-BE 2016