$ compile替代角度9 [英] $compile alternate in angular 9

问题描述

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

i want to append the html to a div and i want it to compile the variables, loops and all the angular component stuff that is in the string, i am uploading the html via text file, i know it can be done using $compile in angularjs, but how can i achieve it in angular latest versions, i have tried safehtml method but unfortunately it's not working.

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

and my component.html

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


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

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

我的html文件看起来像这样

my html file looks like this

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



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

好的，所以上面的html应该具有model.name，但是不幸的是它没有打印出它正在打印的值.

ok so the above html should have model.name but unfortunately it's not printing value it's printing as it is.

推荐答案

好的，因此$ compile在较新版本的angular中贬值了，要在较新版本的angular中实现它是一件困难的事情，因此此软件包非常简单

OK so $compile was depreciated in newer version of angular, and to achieve it in newer version of angular it was a tough thing to do, so this package made it very simple

这篇关于$ compile替代角度9的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！