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>

起初，我认为它是旁路安全管道负责，但我检查了管道的输出，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

中

2020-02-26T10:18:08.415 [Warning] User 'user1@xyz.com' was not found in CRM!

在.html

中

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'), "");

点击事件后在.ts中

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

它将路由视图而无需重新加载整个页面。

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将routerLink放在innerHTML内是一个非常方便的解决方案：

添加自定义元素 ng add @angular/elements
根据需要创建组件，并输入“ href”
在模板中像这样使用它：

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

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

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

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

Answer 6

我真的不知道你想在这里实现什么，但你不应该从后端获得整段代码。相反，只需获得价值＆＃39;一个＆＃39;并在客户端使用插值生成<a routerLink="/one">ONE</a>：

在模板中：

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

Answer 7

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

我试过这个，这对我有用。

innerHTML内的Angular4 routerLink转为小写

7 个答案:

RouteTransformerDirective

组件

模板