将类添加到Angular2中组件之外的特定dom中

在Angular 2中，可以将组件添加到组件之外的特定DOM中。这可以通过使用Angular的ViewContainerRef和ComponentFactoryResolver来实现。

首先，需要在组件中注入ViewContainerRef和ComponentFactoryResolver。ViewContainerRef表示一个视图容器，而ComponentFactoryResolver用于解析组件工厂。

接下来，可以使用ViewContainerRef的createComponent()方法来创建组件实例。这个方法需要传入一个组件工厂，可以通过ComponentFactoryResolver的resolveComponentFactory()方法来获取。

一旦创建了组件实例，可以使用ViewContainerRef的insert()方法将其插入到特定的DOM位置。这个方法需要传入组件实例以及要插入的DOM元素。

以下是一个示例代码：

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>App Component</h1>
      <button (click)="addComponent()">Add Component</button>
      <div #container></div>
    </div>
  `,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  addComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(YourComponent);
    const componentRef = this.container.createComponent(componentFactory);
    // Insert the component into a specific DOM element
    document.getElementById('specific-dom').appendChild(componentRef.location.nativeElement);
  }
}

@Component({
  selector: 'your-component',
  template: '<h2>Your Component</h2>',
})
export class YourComponent {}

在上面的示例中，当点击"Add Component"按钮时，会创建一个YourComponent的实例，并将其插入到具有id="specific-dom"的DOM元素中。

这种方法可以用于将组件添加到任何特定的DOM位置，例如模态框、弹出窗口或其他自定义容器中。

对于更多关于Angular的信息，可以参考腾讯云的Angular产品介绍页面。