innerHTML 中的 Angular4 routerLink 变为小写

Question

我有一个 cmd，可以从服务器获取页面内容。然后内容可以包括 HTML 和链接。问题是当我显示此数据时，链接不起作用。当查看页面源代码时，发现“routerLink”被转换为“router link”，这就是它可能不起作用的原因。这是我的代码:

我的类(class)，注意这里的 routerLink 是驼峰式的:

export class TwoComponent implements OnInit {
  data = '<a routerLink="/one">ONE</a>'; //this will actually come from backend server

  constructor() { }

  ngOnInit() {}
}

还有我的 html:

<div [innerHTML]="data | bypassSecurity"></div>

当我加载此页面并查看源代码时，routerLink 现在是小写的:

<a routerlink="/one">ONE</a>

起初，我以为是 bypassSecurity 管道负责，但我检查了管道的输出，发现 routerLink 仍然是驼峰式的。所以它似乎发生在其他地方。以防万一这里也是我的 bypassSecurity 管道:

export class BypassSecurityPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}

  transform(value): any {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

任何关于这种小写转换发生的地点和原因的建议将不胜感激:)

Answer 1

jcdsr的解决方案对我帮助很大。我通过将它与 DomSanitizer 一起使用来实现它。

这是我的做法:

RouteTransformerDirective

import { Directive, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Directive({
  selector: '[routeTransformer]'
})
export class RouteTransformerDirective {

  constructor(private el: ElementRef, private router: Router) { }

  @HostListener('click', ['$event'])
  public onClick(event) {
    if (event.target.tagName === 'A') {
      this.router.navigate([event.target.getAttribute('href')]);
      event.preventDefault();
    } else {
      return;
    }
  }

};

组件

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

public html: SafeHtml;

constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml('<a href="/something">Link</a>');
}

模板

<div [innerHtml]="html" routeTransformer></div>