innerHTML内的Angular4routerLink转为小写

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

我的班级,注意到routerLink在这里是camelcase:

export class TwoComponent implements OnInit {
  data = 'ONE'; //this will actually come from backend server

  constructor() { }

  ngOnInit() {}
}

而我的HTML:

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

ONE

起初,我认为它是旁路安全管道负责,但我检查了管道的输出,routerLink仍然在那里的驼峰.所以它似乎发生在其他地方.以防这里是我的bypassSecurity管道:

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

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

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

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('Link');
}

模板

这是我的解决方案,您只需要使用html5属性.

在模板上:

在组件中:

        import { Component, OnInit } from '@angular/core';
        import { Router } from '@angular/router';

        @Component({
          selector: 'app',
          templateUrl: './app.component.html',
          styleUrls:['./app.component.css'],

        })

        export class oneComponent implements OnInit {

            testHtml: any;

            constructor( private router: Router,) {}

            this.testHtml=`
            

            ------- Page 1 ------- 
            

            ------- Page 2 ------- 
            

            text -- `;


            getRoute(event) {
                var goRoute = event.target.getAttribute('data-link')
                alert(goRoute);
                this.router.navigate([goRoute]);
            }
        }

或作为指令,

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

        @Directive({     
            selector: '[routeDirective]'
        })

        export class routeDirective {

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

            @HostListener('click', ['$event.target']) onClick($event){
                console.info('clicked: ' + $event.getAttribute('data-link'));
                var goRoute = $event.getAttribute('data-link');
                this.router.navigate([goRoute]);

            }


        }

在模板上作为指令:

缺点:

没有属性的"标签"搜索引擎很好.他们不会将其视为一个链接,他们不会尝试将链接汁传递给它 - 搜索引擎优化.