Angular

Question

我正在尝试创建一个指令，通过添加指向以 @ 符号开头的子字符串的链接来修改元素的 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));
  }

我就是这样使用的

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

调试时我做了以下观察，

this.elementRef.nativeElement.innerHTML 始终为空字符串。
this.renderer.setProperty(this.elementRef.nativeElement, 'innerHTML', 'something'); 附加 something 到元素文本的开头而不是替换。

问题1：如何访问元素的innerHTML？

问题 2：如何通过指令设置元素的 innerHTML？

Stackblitz demonstrating the problem

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

Answer 1

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

这是我最终创建的管道，

linkify.pipe.ts

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 [innerHTML]="sample | linkify"></p>

Demo Stackblitz

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

Angular - How to access and replace innerHTML from a directive

angular-directive