Angular - Как выполнить скрипт, хранящийся в строке с InnerHtml

Question

Я пытаюсь отобразить html и выполнить скрипт, который хранится в строке.

Я создал канал, который преобразует строку с помощью метода this.sanitizer.bypassSecurityTrustHtml ().

Затем я вставляю содержимое строки в атрибут innerHtml и объединяю его с моим каналом.

Вы можете выполнить его в стеке: https://stackblitz.com/edit/angular-uilj36

Это часть моего кода:

safe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml} from '@angular/platform-browser';
@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

  transform(value: any, args?: any): any {
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public html = '<div>Html content</div> <script>console.log("run js ok");</script>';
}

app.component.html

<h1>Code injection :</h1>
<div [innerHtml]="html | safe"></div>

Проблема в том, что скрипт не выполняется.

У кого-нибудь есть идея, почему скрипт не выполняется?

PS: я знаю, что это не рекомендуется, но кто-то попросил меня сделать это:)