ReflectiveInjector 未使用 ngComponentOutlet 指令正确实例化组件答案

【问题标题】：ReflectiveInjector is not instantiating component correctly with ngComponentOutlet DirectiveReflectiveInjector 未使用 ngComponentOutlet 指令正确实例化组件
【发布时间】：2017-05-31 09:44:51
【问题描述】：

这是一个示例Plunker。任何帮助表示赞赏！

@Component({
  selector: 'component1',
  template : `
    <h3>{{title}}</h3>
    <button (click)='dismiss()'>dismiss</button>
     <ng-container *ngComponentOutlet="Component2;
              injector: myInjector;
              content: myContent">
    </ng-container>
  `
})
export class Component1 implements OnInit{
  title : string = "hello!";
  myInjector: Injector;
  myContent: any;
  constructor(private injector : Injector){
    this.myInjector = ReflectiveInjector.resolveAndCreate([
        { provide : Component2, useClass : Component2 }, 
        { provide: TestObject, useFactory: ()=> 
          { 
            return new TestObject("123", "hello world!", "<h2>sample</h2>", "{"a":{"b":{"Value":"test"},"c":{"Value":"test 1"}}}");
          }
        }
      ], this.injector);
  }

  ngOnInit(){
    var templateParent = document.createElement("div");
    templateParent.innerHTML = "<h2>this is test html!</h2>";
    this.myContent = [templateParent.childNodes];


  }

  dismiss(){
    console.log('dismiss clicked!');
  }
}

【问题讨论】：

将链接从代码块移动到链接，将相关代码从 plunker 复制到问题

标签： angular angularjs-directive

【解决方案1】：

我在Component1 中看不到Component2 属性。所以你将undefined 传递给*ngComponentOutlet

试试下面的

export class Component1 implements OnInit{
  Component2 = Component2;

你有语法错误

"{"a":{"b":{"Value":"test"},"c":{"Value":"test 1"}}}"

你应该使用它

'{"a":{"b":{"Value":"test"},"c":{"Value":"test 1"}}}'

Forked Plunker

【讨论】：