Angular: Как динамически загрузить компонент, определенный строкой?

Question

Как мне скомпилировать компонент, определенный строкой, и отобразить его в моем шаблоне?

Я попытался использовать DomSanitizer:

this.sanitizer.bypassSecurityTrustHtml(parsedLinksString);

Но этонеправильно связывает обработчик событий click onButtonClick().

Желаемая функциональность

@Component({
    selector: 'app-sample-component',
    templateUrl: './sample-component.component.html',
    styleUrls: ['./sample-component.component.scss']
})
export class SampleComponent {

  buildMessage() {
    // How do I parse this string and render so that it responds to events?
    const myOutput = '<button (click)="onButtonClick()';
  }

  onButtonClick() {
    console.log('Handler for Dynamic Button');
  }

}

Answer 1

Модель безопасности Angular разработана таким образом, что добавленный к [innerHTML]="myOutput" HTML не обрабатывается (т. Е. Сценарии не выполняются и события не инициируются).

Угловые параметры для компиляции HTML включают в себя:

Добавить HTML в шаблон компонента

В вашем примере HTML-код будет иметь значение sample-component.component.html.Чтобы динамически включать или исключать HTML из шаблона, используйте структурные директивы , такие как *ngIf и *ngFor.

Создание динамического компонента для загрузки во время выполнения

См. Динамический загрузчик компонентов

Демонстрация Stackblitz