$compile alternate in angular 9

Question

我想将 html 附加到 div 并且我希望它编译变量、循环和字符串中的所有 angular 组件内容，我是通过文本文件上传 html，我知道它可以在 angularjs 中使用 $compile 完成，但是我如何在 angular 最新版本中实现它，我已经尝试过安全 html 方法，但不幸的是它不起作用。

my component.ts
 model = {
    name: "junaid",
    age: 24
  };
  title = "twig-alternate";
  htmlStr: string = ``;
 @ViewChild('dataContainer') dataContainer: ElementRef;

  public onChange(fileList: FileList): void {
    let file = fileList[0];
    let fileReader: FileReader = new FileReader();
    let self = this;
    fileReader.onloadend = function(x) {
      self.htmlStr= fileReader.result.toString().replace(/%d%/i, new Date().toString());
      self.dataContainer.nativeElement.innerHTML = self.htmlStr;
      
    }
    fileReader.readAsText(file);
  }
  
}



@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {
    }
    transform(value: string) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

和我的component.html

<input type="file" (change)="onChange($event.target.files)">


<input type="text" [(ngModel)]="htmlStr">

 <div [innerHTML]="htmlStr | safeHtml"></div>

我的 html 文件看起来像这样

<h1>hello </h1>
<h2>today date is %d%</h2>



<h1>{{model.name}}</h1>

好的，所以上面的 html 应该有 model.name 但不幸的是它没有打印值，而是按原样打印。

Answer 1

好的，$compile 在 angular 的较新版本中被贬值了，要在 angular 的较新版本中实现它是一件困难的事情，所以 this 包制作很简单