将角度分量动态注入父组件

Question

我正在尝试将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;
    }
  });
}

这意味着每个步骤都会将文本步骤组件附加到 div

我该怎么做？

Answer 1

您必须使用。 ComponentFactoryResolver

请参阅正常工作的demo