是否可以手动实例化角度2中的组件

发布时间：2020-12-17 07:49:45 所属栏目：安全来源：网络整理

导读：在角度2中,是否可以手动实例化组件A,然后将其传递并在组件B的模板中渲染？是的,这是支持的.您需要一个ViewComponentRef,例如可以通过将其注入构造函数或使用@ViewChild(‘targetname’)查询和也可以注入的ComponentResolver来获取. 例如,https://stackoverf

在角度2中,是否可以手动实例化组件A,然后将其传递并在组件B的模板中渲染？

是的,这是支持的.您需要一个ViewComponentRef,例如可以通过将其注入构造函数或使用@ViewChild(‘targetname’)查询和也可以注入的ComponentResolver来获取.

例如,https://stackoverflow.com/a/36325468/217408的代码示例允许使用* ngFor动态添加组件

@Component({
  selector: 'dcl-wrapper',template: `<div #target></div>`
})
export class DclWrapper {
  @ViewChild('target',{read: ViewContainerRef}) target;
  @Input() type;
  cmpRef:ComponentRef;
  private isViewInitialized:boolean = false;

  constructor(private resolver: ComponentResolver) {}

  updateComponent() {
    if(!this.isViewInitialized) {
      return;
    }
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }
   this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
      this.cmpRef = this.target.createComponent(factory)
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();  
  }

  ngOnDestroy() {
    if(this.cmpRef) {
      this.cmpRef.destroy();
    }    
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!