angular动态创建组件的服务代码_angular 在service中插入组件-优快云博客

本文链接：https://blog.youkuaiyun.com/deping_chen/article/details/100099258

本文探讨了在Angular中使用动态组件创建服务遇到的问题，特别是与路由系统的干扰。通过一个具体的服务实现，展示了如何在任意容器内创建组件，并在创建前清空容器，同时提供了在不同登录状态下的组件实例化示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经测试，动态创建组件和路由有干扰，去掉路由后动态创建组件工作正常。

dynamic-create.service.ts
这个服务可以在任何容器内创建任何组件。创建之前会清空容器。

import { Injectable, ViewContainerRef, ComponentFactory, ComponentRef, ComponentFactoryResolver, Type } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DynamicCreateService {

  constructor(private resolver: ComponentFactoryResolver) { }

  createComponent<componentType>(container: ViewContainerRef, component: Type<componentType>): ComponentRef<componentType> {
    container.clear();
    const factory: ComponentFactory<componentType> =
      this.resolver.resolveComponentFactory<componentType>(component);
    return container.createComponent(factory);
  }
}

用法：
app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('viewContainer', { read: ViewContainerRef }) container: ViewContainerRef;
  componentRef: ComponentRef<any>;

  constructor(
    private dcs: DynamicCreateService,
  ) {
  }

  ngAfterViewInit(): void {
    if (sessionStorage.getItem('userToken')) {
      this.createHomePage();
    } else {
      this.createLoginPage();
    }
  }

  createLoginPage() {
    this.componentRef = this.dcs.createComponent(this.container, LoginComponent);
    (this.componentRef.instance as LoginComponent).login.subscribe(() => this.createHomePage());
  }

  createHomePage() {
    this.componentRef = this.dcs.createComponent(this.container, HomeComponent);
  }
}

app.component.html

<ng-template #viewContainer></ng-template>