[Angular] Dynamic components with ComponentFactoryResolver

最新推荐文章于 2023-05-12 23:13:33 发布

weixin_30894389

最新推荐文章于 2023-05-12 23:13:33 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/6436501.html

本文介绍如何在Angular中通过ViewContainerRef和ComponentFactoryResolver动态创建组件。首先，在模板中添加带有ref的容器；然后，使用@ViewChild获取ViewContainerRef；接着，注入ComponentFactoryResolver；最后，在ngAfterContentInit中创建组件。

To create a component dynamicly.

1. Add a container with ref:

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div #entry>
        <!-- We want to create auth-form component inside this div-->
      </div>
    </div>
  `
})

2. View this container as ViewContainerRef.

@ViewChild('entry', {read: ViewContainerRef}) entry: ViewContainerRef;

3. We need ComponentFactoryResolver:

  constructor(private resolver: ComponentFactoryResolver) {

  }

4. We will create compoennt after content init:

export class AppComponent implements AfterContentInit{
  ngAfterContentInit() {

  }
}

5. Create factory by using resolver:

  ngAfterContentInit() {
    const factory = this.resolver.resolveComponentFactory(AuthFormComponent);
   
  }

6. Create component by using viewContainerRef:

  ngAfterContentInit() {
    const factory = this.resolver.resolveComponentFactory(AuthFormComponent);
    this.entry.createComponent(factory);
  }

7. Make sure, you add entryComponent:

@NgModule({
  declarations: [
    AuthFormComponent,
    AuthRememberComponent,
    AuthMessageComponent
  ],
  imports: [
    CommonModule,
    FormsModule
  ],
  exports: [
    AuthFormComponent,
    AuthRememberComponent
  ],
  entryComponents: [
    AuthFormComponent
  ]
})

// app.component:

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

import { AuthFormComponent } from './auth-form/auth-form.component';

import { User } from './auth-form/auth-form.interface';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <div #entry>
        <!-- We want to create auth-form component inside this div-->
      </div>
    </div>
  `
})
export class AppComponent implements AfterContentInit{

  @ViewChild('entry', {read: ViewContainerRef}) entry: ViewContainerRef;

  constructor(private resolver: ComponentFactoryResolver) {

  }

  ngAfterContentInit() {
    const factory = this.resolver.resolveComponentFactory(AuthFormComponent);
    this.entry.createComponent(factory);
  }

  loginUser(user: User) {
    console.log('Login', user);
  }

}