不能在innerHTML属性绑定中使用其他组件

Question

我创建了一个具有innerHTML绑定属性的示例。我想在模板中使用其他组件，如下所示：

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;
}

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