Question

我尝试为根元素生成一个组件。

目前，我找到了一些与我想要的资源接近的资源，但使用了已弃用的DynamicComponentLoader 。

public component: any;

constructor(
  public dcl: DynamicComponentLoader, 
  public _injector: Injector, 
  public _elementRef: ElementRef
) {
}

public click() {
  if(this.component != undefined){
    this.component.then((componentRef:ComponentRef) => {
      componentRef.dispose();
      return componentRef;
    });
  }

  this.component = this.dcl.loadNextToLocation(Form, this._elementRef);
}

这是demo。

结果是模板是在my-app标记之外生成的，但它只能起作用，因为代码位于my-app标记的组件内部，并且它会为其兄弟生成新元素。

现在我的问题是：为body标签生成组件的当前方法是什么，而不必在模板中引用它？

这里有模板输出的类型：

点击之前：

<body>
    <app>
         <button (click)="click()">
    </app>
<body>

点击后：

<body>
    <app>
         <button (click)="click()">
    </app>
    <my-directive>
         ...
    </my-directive>
<body>

感谢您的帮助！

Answer 1

您可以将应用的ViewContainerRef传递给另一个用作渲染目标的组件。

存储您的应用组件ViewContainerRef：

export class AppComponent {
    constructor(public viewContainerRef: ViewContainerRef) { }
}

将其传递给另一个组件：

<form-renderer [target]="viewContainerRef"></form-renderer>

渲染应用程序组件旁边的表单：

export class FormRenderer implements OnInit {
    @Input('target') target: ViewContainerRef;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

    ngOnInit() {
        // You may need to do this inside a setTimeout

        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(Form);

        this.target.createComponent(componentFactory);
    }
}

Angular - 生成组件到body标签

1 个答案: