innerHTML 中的 Angular4 routerLink 变为小写

Question

我有一个从服务器获取页面内容的 cmd。然后内容可以包括 HTML 和链接。问题是当我显示这些数据时，链接不起作用。在查看页面源时，事实证明“routerLink”被转换为“路由器链接”，这就是它可能不起作用的原因。这是我的代码：

我的班级，请注意 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>

Answer 2

这是我的解决方案，你只需要使用html5属性。

在模板上：

        <div [innerHtml]="testHtml" (click)="getRoute($event)"></div>

在组件中：

        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=`
            <br>
            ------- <span data-link="/page 1">Page 1</span> ------- 
            <br>
            ------- <a data-link="/page 2">Page 2</a> ------- 
            <br>
            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]);

            }


        }

在模板上作为指令：

        <div [innerHtml]="testHtml" routeDirective></div>

缺点：

搜索引擎可以使用没有属性的“标签”。他们不会将其视为链接，也不会尝试将链接汁传递给它 - SEO。

Answer 3

您可以使用以下简单方法在您的锚标记上添加路由

在.ts中

let baseUrl = 'http://localhost/'
let body = `<a href="http://localhost/discussion/details/">route detail</a> and 2nd <a href="http://localhost/discussion/list">route list</a>`
body = body.replace(/href/g, "value");
body = body.replace(new RegExp(baseUrl, 'g'), "");

在 .html 中

<div (click)='changeRoute($event)' [innerHTML]="body"></div>

在点击事件后的 .ts 中

changeRoute(value){
  let myRoute=value.target.attributes.value.value;
  this.router.navigate([myRoute]);
 }

它将在不重新加载整个页面的情况下路由视图。

Answer 4

您是否尝试过其他 routerLink 语法以查看解释器的行为是否有所不同？

<a [routerLink]="javascript code here that return a string or an array"> </a>

代替你的

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

Answer 5

我找到了一个非常方便的解决方案，可以使用 Angular Elements 在 innerHTML 中添加 routerLink：

1. 添加自定义元素 ng add @angular/elements
2. 根据需要使用“href”的输入创建组件
3. 在模板中这样使用：

<a [routerLink]="href"><ng-content></ng-content></a>

4. 在您想要在 innerHTML 中添加 routerLink 的首选组件内注册自定义元素
5. 在innerHTML 字符串中使用您的自定义元素，而不是像这样的<a> 标记

<your-custom-element href="/your/link">THE LINK TITLE</your-custom-element>

这样您就可以完全控制路由器链接，并且仍然可以将 innerHTML 与来自外部（可信）来源的内容一起使用。

Answer 6

我真的不知道你想在这里实现什么，但你不应该从后端获取整段代码。相反，只需接收值 'one' 并在客户端使用插值来生成 <a routerLink="/one">ONE</a>：

在模板中：

<a routerLink="value">{{value}}</a>

Answer 7

您应该从服务器返回<a href="/one">ONE</a> 而不是<a routerLink="/one">ONE</a>。

我已经尝试过了，这对我有用。