内置HTML中的Angular4 routerLink变为小写 [英] Angular4 routerLink inside innerHTML turned to lowercase

问题描述

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

I have a cmd where I get the content of the page from the server. Then content can include HTML and links. The problem is when I display this data the links don't work. When looking at page source it turns out that "routerLink" is transformed into "router link" and that's why it probably doesn't work. Here is my code:

我的课程，请注意，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现在是小写:

And when i load this page and look at the source the routerLink is now in lowercase:

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

起初，我以为是bypassSecurity管道负责，但是我检查了管道的输出，routerLink仍然处于驼峰状态.因此，似乎它发生在其他地方.以防万一这也是我的bypassSecurity管道:

At first, i thought it's the bypassSecurity pipe that responsible but I checked the output of the pipe and routerLink was still in camel case there. So it seems like it happens somewhere else. Just in case here is my bypassSecurity pipe too:

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

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

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

Any advice on where and why this lowercase transformation happens would be appreciated :)

推荐答案

jcdsr的解决方案对我有很大帮助.我通过将它与DomSanitizer结合使用来完成工作.

jcdsr's solution helped me a lot. I got this working by using it with DomSanitizer.

这是我的工作方式:

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>

这篇关于内置HTML中的Angular4 routerLink变为小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！