$compile 在 Angular 9 中替代答案

【问题标题】：$compile alternate in angular 9$compile 在 Angular 9 中替代
【发布时间】：2020-12-22 07:36:12
【问题描述】：

我想将 html 附加到一个 div 并且我希望它编译字符串中的变量、循环和所有角度组件的东西，我正在通过文本文件上传 html，我知道它可以使用$compile in angularjs，但是如何在 angular 最新版本中实现它，我尝试过 safehtml 方法，但不幸的是它不起作用。

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 但不幸的是它没有打印它正在打印的值。

【问题讨论】：

标签： html angularjs angular

【解决方案1】：

好的，所以 $compile 在新版本的 angular 中被贬值了，要在新版本的 angular 中实现它是一件很难的事情，所以 this 包让它变得非常简单

【讨论】：