angularjs – Angular2:以编程方式创建子组件

前端之家收集整理的这篇文章主要介绍了angularjs – Angular2:以编程方式创建子组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如何在父组件内部创建子组件,然后使用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 docs preview中找到了DynamicComponentLoader。但是,在下面的示例中,我得到以下错误:没有动态组件指令在元素0

这通常不是我会采取的方法。相反,我将依赖于一个数组的数据绑定,将渲染更多的子组件,因为对象被添加支持数组。基本上包含在ng-for中的子组件

我有一个例子在这里是相似的,因为它呈现一个动态的孩子列表。不是100%一样,但看起来似乎还是一样的概念:

http://www.syntaxsuccess.com/viewarticle/recursive-treeview-in-angular-2.0

猜你在找的Angularjs相关文章