can not use another component in innerHTML property binding

问题

I have created a sample with innerHTML binding property. I want to use other component inside my template like below:

export class AppComponent  {
        constructor(private sanitized: DomSanitizer) {}

   name = 'Angular';
  public bar = 'bars';
  foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
  </div>
  <hello></hello>
`);
}

hello-component

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<button ejs-button>Button</button>`
})
export class HelloComponent  {
  @Input() name: string;
}

Sample - https://stackblitz.com/edit/angular-vdf66x?file=src/app/app.component.ts

来源：https://stackoverflow.com/questions/56289132/can-not-use-another-component-in-innerhtml-property-binding