कोणीय 2 एक और घटक

Question

मैं एक घटक

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'test-component', 
    template: '<b>Content</b>', 
}) 
export class TestPage { 
    constructor() {} 
} 

है डोम में एक @Component डालने और मैं एक और घटक है:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'main-component', 
    templateUrl: 'main.html', 
}) 
export class MainPage { 

    constructor() {} 

    putInMyHtml() { 

    } 
} 

main.html:

<p>stuff</p> 
<div> <!-- INSERT HERE --> </div> 

मैं उस क्षेत्र में TestPage घटक गतिशील रूप से कैसे डाल सकता हूं जहां <!--INSERT HERE--> प्रोग्रामेटिक रूप से है, जैसे wh मैं putInMyHtml चलाता हूं।

मैंने डोम को संपादित करने और <test-component></test-component> डालने का प्रयास किया लेकिन यह टेस्टपेज के टेम्पलेट से सामग्री टेक्स्ट प्रदर्शित नहीं करता है।

Answer 1

यहाँ एक Plunker ExampleComponentFactoryResolver

सबसे पहले आप अपने गतिशील घटक पंजीकरण कराना होगा साथ है TestPage ठीक से

app.module.ts

@NgModule({ 
    declarations: [MainPage, TestPage], 
    entryComponents: [TestPage] 
}) 

वैकल्पिक विकल्प

import { NgModule, ANALYZE_FOR_ENTRY_COMPONENTS } from '@angular/core'; 

@NgModule({}) 
export class DynamicModule { 
    static withComponents(components: any[]) { 
    return { 
     ngModule: DynamicModule, 
     providers: [ 
     { 
      provide: ANALYZE_FOR_ENTRY_COMPONENTS, 
      useValue: components, 
      multi: true 
     } 
     ] 
    } 
    } 
} 

घोषित गतिशील-module.ts और app.module.ts

में आयात

@NgModule({ 
    imports:  [ BrowserModule, DynamicModule.withComponents([TestPage]) ], 
    declarations: [ MainComponent, TestPage ] 
}) 

फिर अपने MainPage घटक के रूप में लग सकता है इस प्रकार है:

import { ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'; 
@Component({ 
    selector: 'main-component', 
    template: ` 
    <button (click)="putInMyHtml()">Insert component</button> 
    <p>stuff</p> 
    <div> 
     <template #target></template> 
    </div> 
    ` 
}) 
export class MainPage { 
    @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef; 
    constructor(private cfr: ComponentFactoryResolver) {} 

    putInMyHtml() { 
    this.target.clear(); 
    let compFactory = this.cfr.resolveComponentFactory(TestPage); 

    this.target.createComponent(compFactory); 
    } 
} 

[कोणीय 2 में गतिशील रूप से संलग्न प्रारंभ नहीं कर सकते हैं (एचटीएमएल) घटक] (की

Answer 2

दोनों घटकों एक ही मॉड्यूल में हैं, तो यह सुनिश्चित कर लें कि वे दोनों पहले घोषित किया गया:

MyModule

@NgModule({ 
    declarations: [TestPage, MainComponent] 
}) 

वे विभिन्न मॉड्यूल में हैं, तो सुनिश्चित करें कि आप TestPage निर्यात किया है बनाने के लिए और इसे मॉड्यूल में आयात किया गया जहां आप MainComponent लोड करते हैं:

टेस्टपेज मॉड्यूल

@NgModule({ 
    declarations: [TestPage], 
    exports: [TestPage] 
}) 

MainComponent

@NgModule({ 
    declarations: [MainComponent], 
    imports: [TestPage] 
})