在angular 5+中根据用户输入加载动态组件

在Angular 5+中，可以通过使用动态组件来根据用户的输入加载组件。动态组件是在运行时根据需要动态加载的组件。

要在Angular中实现动态组件加载，可以按照以下步骤操作：

1. 创建动态组件：首先，需要创建一个动态组件。可以使用Angular的Component装饰器来定义一个组件，并在模板中添加需要的用户输入控件。
2. 创建动态组件容器：为了动态加载组件，需要在应用中创建一个容器来承载动态组件。这个容器可以是一个div元素或者是一个指令。
3. 动态加载组件：当用户输入满足加载条件时，可以使用Angular的ComponentFactoryResolver来加载动态组件。ComponentFactoryResolver是一个用来解析组件工厂的服务。可以通过调用resolveComponentFactory方法，传入要加载的动态组件类，来获取对应的组件工厂。
4. 创建组件实例：一旦获得了组件工厂，可以通过调用create方法来创建组件实例。使用组件工厂的create方法将组件插入到动态组件容器中。

以下是一个示例代码：

在组件中，需要引入以下的类：

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

在组件类中，使用@ViewChild装饰器来获取动态组件容器的引用。同时注入ComponentFactoryResolver，用于解析组件工厂。

@Component({
  selector: 'app-root',
  template: `
    <div>
      <input type="text" [(ngModel)]="componentName" placeholder="请输入要加载的组件名称">
      <button (click)="loadComponent()">加载组件</button>
      <ng-container #container></ng-container>
    </div>
  `,
})
export class AppComponent {
  componentName: string;
  @ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.componentName);
    this.container.clear();
    this.container.createComponent(componentFactory);
  }
}

在模板中，通过ng-container标签来定义动态组件容器。使用ngModel指令来双向绑定用户输入的组件名称。当用户点击"加载组件"按钮时，调用loadComponent方法来加载动态组件。

请注意，以上示例代码是一个基本的示例，你可以根据自己的需求进行修改和扩展。

关于动态组件加载的更多详细信息，你可以参考Angular官方文档： 动态组件

对于实现动态组件加载的腾讯云相关产品和推荐，腾讯云提供了云服务器CVM、容器服务TKE、云函数SCF等多种服务，这些服务可以支持动态组件加载的需求。你可以通过访问腾讯云官网了解更多相关产品和产品介绍。