Question

我想将html附加到div，我希望它编译字符串中的变量，循环和所有角度组件，我通过文本文件上传html，我知道可以使用$ compile在angularjs中，但是如何在最新版本的angularjs中实现，我已经尝试过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，但是不幸的是它没有打印出它正在打印的值。

Answer 1

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

$ compile替代角度9

1 个答案: