将角度组件动态注入父组件答案

【问题标题】：Dynamic inject angular component into parent component将角度组件动态注入父组件
【发布时间】：2017-07-10 10:34:09
【问题描述】：

我正在尝试将 Angular 组件注入到父组件中，使用 [innerHTML] 属性，我只获取 HTML 代码，它不会编译到我的子组件中

我的子组件：

@Component({
  selector: 'text-step',
  styleUrls: ['./text.scss'],
  templateUrl: 'text.html',
})

export class TextStepComponent implements OnInit {

  @Input() step: object;

  constructor(
  ) { }

  ngOnInit() {
  }

}

我的父组件：

renderSteps(listSteps) {
  var context = this;
  var result = '';
  listSteps.forEach(function(step) {

    switch (step.type) {
      case 'form_text':
        context.innerHtml += '<text-step [step]=\"' + step + '\"></text-step>';
        break;
    }
  });
}

这意味着每一步都会将 text-step 组件附加到 div

我该怎么做？

【问题讨论】：

这可能会对您有所帮助。 stackoverflow.com/questions/38888008/…
用户 angular Renderer2 来缩小 dom，因为它与平台无关。欲了解更多信息https://angular.io/api/core/Renderer2#appendChild
您需要的所有信息都可以在这篇文章中找到 - Here is what you need to know about dynamic components in Angular。但是您将无法更新输入

标签： angular

【解决方案1】：

你必须使用。 ComponentFactoryResolver

请看工作demo

【讨论】：