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组件动态插入区域，就像我运行putInMyHtml时一样。

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

Answer 1

Plunker Example ， ComponentFactoryResolver

首先，您必须正确注册动态组件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);
  }
}

Answer 2

如果两个组件都在同一个模块中，请确保它们都是第一个：

<强> MyModule的

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

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

<强> TestPageModule

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

<强> MainComponent

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

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

2 个答案: