Question

我的组件注入了动态。但是如何在没有任何包装的情况下定义它们的位置？

@FXML
private void handleButtonAction(ActionEvent event) throws IOException {
    // remove this:
    //Controller ctr = new Controller();

    //fenetre Commande
    if (event.getSource() == btnConnect10) {
        // replace this
        // ctr.Commande(entry10.getText(), entry20.getText(), entry30.getText());
        // with this
        Commande(entry10.getText(), entry20.getText(), entry30.getText());
        // or equivalently
        // this.Commande(entry10.getText(), entry20.getText(), entry30.getText());
    }
    //fenetre Reception
    if (event.getSource() == btnConnect11) {
       Reception(entry11.getText(), entry21.getText(), entry31.getText());
    }

    //fenetre connexion      
    if (event.getSource() == btnConnect13) {
        Connect(usr.getText(), passwd.getText());
    }
}

我想把它们注入一些DIV。

import { Component, ViewContainerRef, ComponentResolver } from '@angular/core';

  constructor(
    private apiService: ApiService,
    private viewContainerRef: ViewContainerRef,
    private componentResolver: ComponentResolver) {
  }

  create() {
    this.componentResolver.resolveComponent(PieChart).then((factory) => {
      this.viewContainerRef.createComponent(factory);
    });
  }

Answer 1

有两种方法：

在问题中注入ViewContainerRef，然后在此组件下方添加新组件
使用组件模板中的目标元素与<div #target></div>和@ViewChild('target', {read: ViewContainerRef}) viewContainerRef:ViewContainerRef;之类的模板变量来获取此ViewContainerRef的{{1}}。添加的元素将再次添加到此<div>

createComponent()允许传递索引。默认情况下，总是会在末尾添加新组件，但如果您传递索引，则会将其插入此位置（未经测试）索引<div>您应该能够在目标元素之前添加新元素如果向同一个0添加多个组件，则可以传递索引以在先前添加的元素之前插入新组件。

Answer 2

在结尾发布中，不推荐使用ComponentResolver。相反，我们可以使用Compiler API创建ComponentFactory。

但我们现在该如何做到这一点？

我发现这篇文章http://blog.lacolaco.net/post/dynamic-component-creation-in-angular-2-rc-5/但编译器没有方法compileComponentAsync。

如何定义注入动态组件的位置？

2 个答案: