ReflectiveInjector 未使用 ngComponentOutlet 指令正确实例化组件 [英] ReflectiveInjector is not instantiating component correctly with ngComponentOutlet Directive

问题描述

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

@Component({选择器:'component1'，模板:`<h3>{{title}}</h3><button(点击)='dismiss()'>dismiss</button><ng-container *ngComponentOutlet="Component2;注射器:myInjector；内容:我的内容"></ng-容器>`})导出类 Component1 实现 OnInit{标题:字符串=你好！"；myInjector:注射器；我的内容:任何；构造函数(私有注入器:注入器){this.myInjector = ReflectiveInjector.resolveAndCreate([{ 提供:组件 2，使用类:组件 2 }，{ 提供:TestObject，useFactory:()=>{return new TestObject("123", "hello world!", "<h2>sample</h2>", "{"a":{"b":{"Value":"test"},"c":{"值":"测试 1"}}}");}}], this.injector);}ngOnInit(){var templateParent = document.createElement("div");templateParent.innerHTML = "<h2>这是测试 html！</h2>";this.myContent = [templateParent.childNodes];}解雇(){console.log('关闭点击！');}}

解决方案

我在 Component1 中没有看到 Component2 属性.所以你将 undefined 传递给 *ngComponentOutlet

试试下面的方法

导出类 Component1 实现 OnInit{组件 2 = 组件 2；

你有语法错误

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

你应该把它当作

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

分叉 Plunker

Here is an example Plunker. Any help is appreciated!

@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!');
  }
}

解决方案

I don't see Component2 property in Component1. So you're passing undefined to *ngComponentOutlet

Try the following

export class Component1 implements OnInit{
  Component2 = Component2;

And you have syntax error

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

you should use it as

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

Forked Plunker

这篇关于ReflectiveInjector 未使用 ngComponentOutlet 指令正确实例化组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！