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

Question

所以我有一个角度组件，有选择器“app-mission”

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

我可以在html中使用这个组件，只需将<app-mission></app-mission>添加到项目中的任何html文件中，然后获取整个组件，但是当我尝试时

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

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

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

编辑：

我现在明白为什么这不像我想的那样有效。查看答案以获得良好的解决方案

Answer 1

不建议使用document.引用，因为在Web Workers或Server Side Rendering的情况下这些引用不可用。

动态加载组件是您在这里寻找的东西。

1. 首先，创建一个暴露ViewContainerRef的指令：

---

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

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

2. 然后在您要在其中手动创建组件的父组件中，使用ViewChild访问该指令。注入ComponentFactoryResolver，然后通过在resolveComponentFactory实例上调用ComponentFactoryResolver来创建Component Factory，并将其传递给您要创建的组件类型。最后，在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);
  }
}

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

---

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

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

这是你的参考的Sample StackBlitz。