角2插入到@Component另一組件

我有一個部件角2插入到@Component另一組件

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

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

的DOM我有另一種組分：

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組件插入編程的區域，如wh我運行putInMyHtml。

我嘗試編輯DOM並插入<test-component></test-component>，但它不顯示TestPage模板中的內容文本。

來源

2016-11-12 Akshat

[在角2無法初始化動態追加（HTML）組件（可能的重複http://stackoverflow.com/questions/36566698/cant- initialize-dynamic-html-component-in-angular-2） – echonax

這是正確的解決方案。您是否在瀏覽器控制檯或編譯器中收到錯誤消息？ – Martin

@Martin沒有錯誤，它仍然在DOM中的沒有角度渲染模板。 – Akshat

下面是一個Plunker Example與ComponentFactoryResolver

首先，你必須註冊你的動態組件TestPage正確

個app.module.ts

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

替代選項

聲明動態module.ts

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

和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); 
    } 
}

來源

2016-11-13 05:52:10 yurzui

奇妙的是，我嘗試了很多東西，這是一個令人頭疼的問題，Angular不停地變化 – Akshat

如果兩個部件是相同的模塊中，確保他們都宣稱第一：

MyModule的

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

如果它們在不同的模塊，請確保您已經導出TestPage和將其導入您加載的模塊中MainComponent：

TestPageModule

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

MainComponent

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

來源

2016-11-12 22:08:56 brians69

角2插入到@Component另一組件

回答

相關問題