[英]Angular2: Creating child components programmatically
如何在父组件内创建子组件,然后使用Angular2在视图中显示它们? 如何确保将注射剂正确注射到儿童组件中?
import {Component, View, bootstrap} from 'angular2/angular2';
import {ChildComponent} from './ChildComponent';
@Component({
selector: 'parent'
})
@View({
template: `
<div>
<h1>the children:</h1>
<!-- ??? three child views shall be inserted here ??? -->
</div>`,
directives: [ChildComponent]
})
class ParentComponent {
children: ChildComponent[];
constructor() {
// when creating the children, their constructors
// shall still be called with the injectables.
// E.g. constructor(childName:string, additionalInjectable:SomeInjectable)
children.push(new ChildComponent("Child A"));
children.push(new ChildComponent("Child B"));
children.push(new ChildComponent("Child C"));
// How to create the components correctly?
}
}
bootstrap(ParentComponent);
我在API文档预览中找到了DynamicComponentLoader
。 但是在遵循示例时出现以下错误: 元素0处没有动态组件指令
这通常不是我采取的方法。 相反,我依赖于对数组的数据绑定,当数组被添加到后备数组时,该数组将呈现更多的子组件。 基本上包含在ng-for中的子组件
我在这里有一个类似的例子,它呈现一个动态的子列表。 不是100%相同,但似乎概念仍然是相同的:
http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0
在Angular 2.0中, DynamicComponentLoader
loadIntoLocation
方法用于创建父子关系。 通过使用此方法,您可以动态创建两个组件之间的关系。
以下是示例代码,其中纸张是我的父级, 公告是我的子组件。
paper.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');
}
}
bulletin.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'bulletin',
template: '<div>Hi!</div>'
}
})
export class BulletinComponent {}
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 app中向DOM添加组件
我们需要使用ngAfterContentInit()
生命周期方法从AfterContentInit
。 在指令内容完全初始化后调用它。
在parent-component.html
,添加如下div
:
<div #container> </div>
parent-component.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
。 它有一个基本上加载组件的方法。
正确的方法取决于您尝试解决的情况。
如果孩子的数量未知,那么NgFor是正确的方法。 如果已修复,如上所述,3个孩子,您可以使用DynamicComponentLoader
手动加载它们。 手动加载的好处是可以更好地控制元素并在Parent中引用它们(也可以使用模板获得...)
如果您需要使用数据填充子项,这也可以通过注入完成,Parent将注入一个填充子项的数据对象...
再次,很多选择。 我在我的模态示例中使用了'DynamicComponentLoader', https://github.com/shlomiassaf/angular2-modal
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.