将组件加载到动态生成的模板

时间:2016-10-20 07:43:34

标签: angular

我正在尝试使用ComponentFactoryResolver动态加载组件

这是我的代码

import {Component, ComponentRef, ViewContainerRef, ComponentFactoryResolver,
        ViewChild, OnInit, OnDestroy, AfterViewInit} from '@angular/core';
import {MyDynamicComponent} from './mycomponent';

@Component({
  selector: 'home',
  template: '<template #Component1></template>'
})
export class Home implements AfterViewInit {

private componentReference: ComponentRef<any>;

@ViewChild('Component1', { read: ViewContainerRef })
private dynamicTarget: ViewContainerRef;


  constructor(private resolver: ComponentFactoryResolver) {}

  ngAfterViewInit() {
 let componentFactory = this.resolver.resolveComponentFactory(MyDynamicComponent);
  this.componentReference = this.dynamicTarget.createComponent(componentFactory);


   }

此代码工作正常 但是在我的实际实现中,<template #Component1></template>将动态生成,在这种情况下它不起作用,因为在尝试加载组件时尚未生成模板ID。在完成dom的生成之后有没有办法使用@viewChild。任何帮助都非常感谢。

0 个答案:

没有答案