Angular 2 将 @Component 插入到另一个组件的 DOM 中

Question

我有一个组件

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

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

我还有另一个组件：

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--> 以编程方式运行的区域中，就像我运行putInMyHtml 时一样。

我尝试编辑 DOM 并插入 <test-component></test-component>，但它不显示来自 TestPage 模板的内容文本。

Answer 1

如果两个组件都在同一个模块中，请确保它们都首先声明：

我的模块

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

如果它们位于不同的模块中，请确保您已导出 TestPage 并将其导入到您加载 MainComponent 的模块中：

TestPageModule

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

主组件

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

Answer 2

这是一个带有 ComponentFactoryResolver 的 Plunker Example

首先你必须正确注册你的动态组件TestPage

app.module.ts

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

另一种选择

声明 dynamic-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);
  }
}