Angular-如何从指令访问和替换innerHTML

我试图创建一个指令，通过添加指向以

@

符号开头的子字符串的链接来修改元素的

innerHTML

这就是我到目前为止所尝试的

linkify.directive.ts

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { 
      let elementText = this.elementRef.nativeElement.innerHTML;
      // elementText = '@user mentioned you';
      console.log(`Element Text: ${elementText}`);
      this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', this.stylize(elementText));
  }

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'linkify'
})
export class LinkifyPipe implements PipeTransform {

  constructor(private _domSanitizer: DomSanitizer) {}

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

  private stylize(text: string): string {
    let stylizedText: string = '';
    if (text && text.length > 0) {
      for (let t of text.split(" ")) {
        if (t.startsWith("@") && t.length>1)
          stylizedText += `<a href="#${t.substring(1)}">${t}</a> `;
        else
          stylizedText += t + " ";
      }
      return stylizedText;
    }
    else return text;
  }

}

我就是这样用的

<p linkify> Hey @user check this out! </p>

嘿@user看看这个

在调试期间，我做了以下观察：

• this.elementRef.nativeElement.innerHTML

  始终具有空字符串

• this.renderer.setProperty（this.elementRef.nativeElement，'innerHTML'，'something'）是在元素文本的开头追加内容，而不是替换内容

问题1:如何访问元素的

innerHTML

问题2:如何设置指令中元素的innerHTML

---

我尝试了文档，但对我没有帮助。

正如@bryan60所建议的那样，理想的方法是创建管道而不是指令

这是我最后制作的管道

linkify.pipe.ts

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { 
      let elementText = this.elementRef.nativeElement.innerHTML;
      // elementText = '@user mentioned you';
      console.log(`Element Text: ${elementText}`);
      this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', this.stylize(elementText));
  }

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'linkify'
})
export class LinkifyPipe implements PipeTransform {

  constructor(private _domSanitizer: DomSanitizer) {}

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

  private stylize(text: string): string {
    let stylizedText: string = '';
    if (text && text.length > 0) {
      for (let t of text.split(" ")) {
        if (t.startsWith("@") && t.length>1)
          stylizedText += `<a href="#${t.substring(1)}">${t}</a> `;
        else
          stylizedText += t + " ";
      }
      return stylizedText;
    }
    else return text;
  }

}

从'@angular/core'导入{Pipe，PipeTransform}；
从“@angular/platform browser”导入{domsanizer}；
@烟斗({
名称：'linkify'
})
导出类LinkifyPipe实现PipeTransform{
构造函数（私有_domsanizer:domsanizer）{}
转换（值：any，args？：any）：any{
返回此。_domsanizer.bypassSecurityTrustHtml（this.styleze（value））；
}
私有样式化（文本：字符串）：字符串{
让StylezedText:string=''；
如果（text&&text.length>0）{
对于（让t个文本分割（“”）{
如果（t.startsWith（“@”）和t.length>1）
StylezedText+=`；
其他的
StylezedText+=t+“”；
}
返回样式化文本；
}
否则返回文本；
}
}

用法：

<p [innerHTML]="sample | linkify"></p>

---

将其改为管道，并使用它制定的dom sanitizerglad。我很惊讶您需要通过使用dom sanitizer直接访问内部HTML。我想，{text | linkify}

会正常工作。我不得不做一些非常接近这个的事情，这就是我最终开始使用的语法。不记得是怎么回事了。@bryan60我最初只是尝试使用它，但遇到了问题，结果是使用DOMSanizer清理的字符串应该绑定到

innerHTML

，否则它们最终会将清理后的标记呈现为纯文本。