javascript - ViewContainerRef 未将组件加载到 DOM 中

Question

@Component({
  selector: 'my-cmp',
  template: `
  <div #target></div>
  `
})
export class MyCmp {
@ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef;

render() {
    let cmp = Component(metadata)(type);
    this.componentResolver.resolveComponent(cmp).then(factory => {
      let component = this.target.createComponent(factory, 0, null, null);
    });
  }
}

我正在尝试将组件加载到 ViewContainerRef 中。全部documentation说一旦创建了组件，它就会自动加载到 DOM(ViewChild 所在的位置)中。但这并没有发生。为什么？请帮忙。

Answer 1

不确定您添加的代码是否完整或只是其中的一部分，我没有看到 ComponentResolver 注入(inject)到您的构造函数中，也可能是这里的拼写错误，但 resolveComponent then block 未关闭(缺少 ))。

 import { Component, ViewChild, ViewContainerRef, ComponentResolver }  from '@angular/core';

 @Component({
   selector: 'my-test',
   template: `
    Test Component
   `
 })
 export class TestComponent {}

 @Component({
   selector: 'my-app',
   template: `<h3 class="title">Basic Angular 2</h3>
   <div #target></div>
   `
 })
 export class AppComponent {
   @ViewChild('target', {read: ViewContainerRef}) target : ViewContainerRef;

   constructor(private componentResolver: ComponentResolver){
     this.render();
   }

   render = () =>  {
     // include app specific logic to get ComponentType
     //  let cmp = Component(metadata)(type);
     this.componentResolver.resolveComponent(TestComponent).then(factory => {
      let component = this.target.createComponent(factory, 0, null, null);
     });
    }
  }

这是Plunker!!

希望这有帮助!!