单击angular2中的按钮即可将组件添加到dom

在Angular 2中，可以通过单击按钮来将组件添加到DOM中。这可以通过以下步骤实现：

1. 首先，在Angular 2项目中创建一个组件。可以使用Angular CLI来生成一个新的组件，命令为：ng generate component component-name。这将生成一个包含组件代码的文件夹。
2. 在组件的HTML模板中，添加一个按钮元素，并为其绑定一个点击事件。可以使用Angular的事件绑定语法来实现，例如：<button (click)="addComponent()">Add Component</button>。
3. 在组件的TypeScript文件中，定义一个方法来处理按钮的点击事件。在该方法中，可以使用Angular的动态组件加载功能来将组件添加到DOM中。以下是一个示例方法：

import { Component, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="addComponent()">Add Component</button>
    <div #container></div>
  `,
})
export class AppComponent {
  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  addComponent() {
    const componentFactory = this.resolver.resolveComponentFactory(DynamicComponent);
    const componentRef = this.container.createComponent(componentFactory);
  }
}

在上面的代码中，addComponent()方法使用ComponentFactoryResolver来解析动态组件的工厂，并使用ViewContainerRef来获取一个容器元素，用于将组件添加到DOM中。然后，通过调用createComponent()方法，将动态组件添加到容器中。

1. 最后，需要在Angular模块中声明动态组件。在@NgModule装饰器的declarations数组中添加动态组件的引用，例如：declarations: [DynamicComponent]。

这样，当单击按钮时，Angular 2将会动态地将组件添加到DOM中。

关于Angular 2的更多信息和示例，可以参考腾讯云的Angular开发文档：Angular开发。