Javascript Angular2：以编程方式创建子组件 问题:

如何在父组件内创建子组件，然后使用Angular2在视图中显示它们？如何确保注射剂正确注入子组件

例子

从'angular2/angular2'导入{组件、视图、引导程序}；
从“/ChildComponent”导入{ChildComponent}；
@组成部分({
选择器：“父级”
})
@看法({
模板：`
孩子们：
`,
指令：[子组件]
})
类ParentComponent{
儿童：儿童部分[]；
构造函数（）{
//在创建子对象时，它们的构造函数
//仍应与注射剂一起调用。
//例如构造函数（childName:string，additionalInjectable:SomeInjectable）
推送（新的子组件（“子A”））；
推送（新的子组件（“子B”））；
推送（新的子组件（“子C”））；
//如何正确创建组件？
}
}
引导（父组件）；

编辑

---

我在中找到了

DynamicComponentLoader

。但是，在下面的示例中，我得到了以下错误：元素0处没有动态组件指令，这通常不是我将采用的方法。相反，我将依赖于对数组进行数据绑定，当对象添加到支持数组时，该数组将呈现出更多的子组件。本质上是用ng包装的子组件

我这里有一个类似的例子，它呈现一个动态的子列表。并非100%相同，但概念似乎仍然相同：

---

正确的方法取决于您试图解决的情况

如果孩子的数量未知，那么NgFor是正确的方法。 如您所述，如果已修复3个子项，则可以使用

DynamicComponentLoader

手动加载它们。 手动加载的好处是更好地控制元素并在父级中引用它们（也可以使用模板…）

如果您需要用数据填充子项，也可以通过注入来完成，父项将被注入一个数据对象，以就地填充子项

同样，有很多选择。 我在模态示例中使用了“DynamicComponentLoader”，警告：DynamicComponentLoader在RC.4中已被弃用 在Angular 2.0中，

LoadInLocation

方法的

DynamicComponentLoader

用于创建父子关系。通过使用这种方法，您可以动态地创建两个组件之间的关系

下面是示例代码，其中纸张是我的父组件，公告是我的子组件

纸组件

import {Component,DynamicComponentLoader,ElementRef,Inject,OnInit} from 'angular2/core';
import { BulletinComponent } from './bulletin.component';

@Component({
    selector: 'paper',
    templateUrl: 'app/views/paper.html'

    }
})
export class PaperComponent {
    constructor(private dynamicComponentLoader:DynamicComponentLoader, private elementRef: ElementRef) {

    }

    ngOnInit(){
        this.dynamicComponentLoader.loadIntoLocation(BulletinComponent, this.elementRef,'child');

    }
}

import {Component} from 'angular2/core';

@Component({
    selector: 'bulletin',
    template: '<div>Hi!</div>'
    }
})
export class BulletinComponent {}

公告.component.ts

import {Component,DynamicComponentLoader,ElementRef,Inject,OnInit} from 'angular2/core';
import { BulletinComponent } from './bulletin.component';

@Component({
    selector: 'paper',
    templateUrl: 'app/views/paper.html'

    }
})
export class PaperComponent {
    constructor(private dynamicComponentLoader:DynamicComponentLoader, private elementRef: ElementRef) {

    }

    ngOnInit(){
        this.dynamicComponentLoader.loadIntoLocation(BulletinComponent, this.elementRef,'child');

    }
}

import {Component} from 'angular2/core';

@Component({
    selector: 'bulletin',
    template: '<div>Hi!</div>'
    }
})
export class BulletinComponent {}

从'angular2/core'导入{Component}；
@组成部分({
选择器：“公告”，
模板：“嗨！”
}
})
导出类BulletIncomonent{}

paper.html

<div>
    <div #child></div>
</div>

---

您应该使用ComponentFactoryResolver和ViewElementRef在运行时添加组件

let factory = this.componentFactoryResolver.resolveComponentFactory(SpreadSheetComponent);
let res = this.viewContainerRef.createComponent(factory);

将上述代码放入ngOnInit函数中，并用组件名称替换“SpreadSheetComponent”

---

希望这能奏效。

在Angular 2/4应用程序中以编程方式向DOM添加组件

我们需要使用

AfterContentInit

中的

ngAfterContentInit（）生命周期方法。指令内容完全初始化后调用它

在
parent component.html
中，像这样添加a
div
：



class ParentComponent implements AfterContentInit {

  @ViewChild("container", { read: ViewContainerRef }) divContainer

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngAfterContentInit() {
    let childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(childComponent);
    this.divContainer.createComponent(childComponentFactory);
    let childComponentRef = this.divContainer.createComponent(childComponentFactory);
    childComponentRef.instance.someInputValue = "Assigned value";

  }
}


父组件.ts的
文件如下所示：



class ParentComponent implements AfterContentInit {

  @ViewChild("container", { read: ViewContainerRef }) divContainer

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  ngAfterContentInit() {
    let childComponentFactory = this.componentFactoryResolver.resolveComponentFactory(childComponent);
    this.divContainer.createComponent(childComponentFactory);
    let childComponentRef = this.divContainer.createComponent(childComponentFactory);
    childComponentRef.instance.someInputValue = "Assigned value";

  }
}

在
src\app\app.module.ts
中，将以下条目添加到
@NgModule（）
方法参数中：


  entryComponents:[
    childComponent
  ],

请注意，我们没有使用
@ViewChild（“container”）divContainer
方法访问
div#container
。我们需要它的引用，而不是
nativeElement
。我们将通过
ViewContainerRef
访问它：

@ViewChild（“container”，{read:ViewContainerRef}）divContainer

ViewContainerRef
有一个名为
createComponent（）
的方法，该方法要求将组件工厂作为参数传递。同样，我们需要注入一个
ComponentFactoryResolver
。它有一个基本上加载组件的方法。
很好的例子，还不确定它是否回答了我的问题。我有一些关于语法的后续问题，我在文章下面发表了评论。基本上，我找不到以下内容的任何文档。在模板中：[directories]=“directories”、[checked]=“dir.checked”或（单击）=“dir.check（）”。在组件属性：[“目录：目录”]。。。这些东西叫什么名字？我在哪里可以读到它们？我已经在你的评论中添加了一个回复，添加了一些关于为什么
这通常不是我会采取的方法的信息
可能会对人们有所帮助。谢谢你问这个问题——这正是我想弄明白的。另请参阅，你能提供到弃用文档的链接吗？