Question

所以我有一个角度分量带有选择器“ app-mission”

@Component({
    selector: 'app-mission',
    templateUrl: './mission.component.html',
    styleUrls: ['./mission.component.css']
})

只要将<app-mission></app-mission>添加到项目中的任何html文件中，就可以按预期使用html中的该组件，并获得整个组件，但是当我尝试

var element = document.createElement("app-mission");

在打字稿文件中，它会创建一个空的 <app-mission></app-mission>元素。

为什么这不起作用？有什么简单的方法可以使它在我的打字稿文件中正常工作？

编辑：

我现在了解为什么这不像我想的那样起作用。查看答案以获得良好的解决方案。

Answer 1

实际上不建议使用document.引用，因为在Web Worker或服务器端渲染的情况下将不可用。

要在此处动态加载组件。

首先，创建一个公开ViewContainerRef的指令：

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

@Directive({
  selector: '[appContainer]'
})
export class ContainerDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

然后在要手动创建组件的父组件中，使用ViewChild来访问该指令。注入ComponentFactoryResolver，然后通过在resolveComponentFactory的实例上调用ComponentFactoryResolver来创建组件工厂，并将要创建的组件类型传递给它。最后，在createComponent实例上调用ViewContainerRef并将其传递给组件工厂实例。

import { Component, ViewChild, ComponentFactoryResolver } from '@angular/core';
import { MissionComponent } from './mission/mission.component';
import { ContainerDirective } from './container.directive';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  @ViewChild(ContainerDirective) container: ContainerDirective;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit() {
    this.loadComponent();
  }

  loadComponent() {
    const componentFactory = this.componentFactoryResolver
      .resolveComponentFactory(MissionComponent);

    this.container.viewContainerRef
      .createComponent(componentFactory);
  }
}

最后，将MissionComponent添加到entryComponents中的AppModule数组中

...
import { MissionComponent } from './mission/mission.component';
...

@NgModule({
  ...
  entryComponents: [MissionComponent]
})
export class AppModule { }

这是您推荐的Sample StackBlitz。

为什么选择“ document.createElement（” component-selector“）;”创建一个空元素？

1 个答案: