选择要在Angular 2中动态显示的组件

在Angular 2中动态显示组件可以通过使用动态组件来实现。动态组件是一种在运行时动态加载和渲染的组件，可以根据需要动态地将其添加到应用程序中。

要在Angular 2中动态显示组件，可以按照以下步骤进行操作：

创建一个动态组件：首先，需要创建一个动态组件。动态组件是一个普通的Angular组件，但需要使用ComponentFactoryResolver来动态创建它。可以通过使用@Component装饰器来定义动态组件，并在需要动态显示组件的地方引入它。
获取组件工厂：在需要动态显示组件的地方，需要获取动态组件的组件工厂。可以通过使用ComponentFactoryResolver的resolveComponentFactory方法来获取组件工厂。需要将动态组件的类型作为参数传递给该方法。
创建组件实例：使用组件工厂的create方法来创建动态组件的实例。可以通过调用createComponent方法来创建组件实例，并将其添加到应用程序中的特定位置。
动态显示组件：将组件实例添加到应用程序中的特定位置，以动态显示组件。可以通过使用ViewContainerRef来获取要添加组件的视图容器，并使用createComponent方法返回的组件实例来将其添加到视图容器中。

以下是一个示例代码，演示了如何在Angular 2中动态显示组件：

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

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

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    // 获取动态组件的组件工厂
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);

    // 创建组件实例
    const componentRef = this.dynamicComponentContainer.createComponent(componentFactory);

    // 可以通过componentRef.instance来访问动态组件的属性和方法
  }
}

在上面的示例中，当点击"Load Component"按钮时，会调用loadComponent方法。该方法会获取动态组件的组件工厂，并使用组件工厂创建组件实例。然后，将组件实例添加到dynamicComponentContainer视图容器中，从而动态显示组件。

动态显示组件在以下场景中非常有用：