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

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

Я пробовал использовать 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');
  }

}


person Fabricio Frontarolli    schedule 24.09.2019    source источник
comment
вы используете атрибут innerHTML в родительском элементе DOM для отображаемой строки? из здесь   -  person LostJon    schedule 24.09.2019
comment
Мне это кажется проблемой XY. Люди могут лучше помочь вам, если вы спросите, какой результат или какие функции вы пытаетесь получить. В чем причина попытки создать такую ​​кнопку с помощью строки HTML?   -  person Chris Yungmann    schedule 25.09.2019
comment
Да, я попытался использовать атрибут innerHtml и отобразить его, однако события (щелчок) не работают, поскольку это чистый HTML и не поддерживает привязки Angular.   -  person Fabricio Frontarolli    schedule 26.09.2019
comment
Как бы вы разработали следующий компонент? Компонент уведомления, который подключается к магазину, и любой компонент может вызывать действие и отображать уведомления. Однако эти тексты уведомлений могут содержать ссылку с призывом к действию (например, нажмите здесь, чтобы узнать больше). Эта ссылка является динамическим контентом и также должна быть привязана к методу / событию в классе Angular.   -  person Fabricio Frontarolli    schedule 26.09.2019


Ответы (1)


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

Параметры Angular для компиляции HTML включают:

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

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

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

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

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

person Christopher Peisert    schedule 25.09.2019