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

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