Question

我想使用一个自创建的组件，并将其动态添加到页面中。

它以静态方式很好地工作，例如直接将其添加到html中 <My-Component></My-Component>。

关于动态方式，我首先尝试直接使用：

  var node = document.body.query('#board');
  node.append( new Element.html('<My-Component></My-Component>'));

它什么也不显示，因为无法解析创建的组件。

在dart v1中有一种方法可以动态地执行此操作，例如：

  ng.Injector inj = ngaf.applicationFactory().addModule(new MyAppModule()).run();
  var node = dom.querySelector('#mydiv');
  node.append(new dom.Element.html('<My-Component></My-Component>', validator: new dom.NodeValidatorBuilder()..allowCustomElement("My-Component")));
  ng.Compiler compiler = inj.get(ng.Compiler);
  ng.DirectiveMap directiveMap = inj.get(ng.DirectiveMap);
  compiler(node.childNodes, directiveMap)(inj, node.childNodes);

如何在当前的Dart中实现？或者在哪里可以使用“编译器”，“ DirectiveMap”等。被发现？

Answer 1

HTML

    <ng-container #vc></ng-container>

TS

    @ViewChild('vc',{read:ViewContainerRef}) vc:ViewContainerRef;        
    constructor(private resolver:ComponentFactoryResolver){        
    const factory=this.resolver.resolveComponentFactory(Component)
    //This code used to get component factory
    this.vc.clear()
    //Clear ViewContainer
    this.vc.createComponent(factory);

}

示例：https://stackblitz.com/edit/angular-dynamically-creating-components-pakc72 文档：https://angular.io/guide/dynamic-component-loader

如何以编程方式将创建的组件添加到Page？

1 个答案: