Angular4 routerLink внутри innerHTML превращается в нижний регистр

2

У меня есть cmd, где я получаю содержимое страницы с сервера. Тогда контент может включать HTML и ссылки. Проблема в том, что когда я показываю эти данные, ссылки не работают. При просмотре источника страницы выясняется, что "routerLink" преобразуется в "соединение с маршрутизатором" и почему он, вероятно, не работает. Вот мой код:

Мой класс, обратите внимание, что routerLink находится в camelcase здесь:

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);
  }
}

Любые советы о том, где и почему происходит это преобразование в нижнем регистре, будут оценены :)

  • 0
    Извините, не понимаю вас, никакой разницы по сравнению с чем?
Теги:
angular

6 ответов

12

Решение 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>
Поделиться
6

Это мое решение, вам нужно только использовать атрибуты 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.

Поделиться
  • 0
    Вы также можете использовать каналы, если хотите, например: <div [innerHtml] = "testHtml | safeHtml: 'html': 'url'" (click) = "getRoute ($ event)"> </ div>
0

Я нашел очень удобное решение для использования routerLink внутри innerHTML с использованием Angular Elements:

  1. Добавить пользовательские элементы ng add @angular/elements
  2. Создайте компонент по желанию с помощью ввода для "href"
  3. в шаблоне используйте это так:
<a [routerLink]="href"><ng-content></ng-content></a>
  1. Зарегистрируйте пользовательский элемент внутри предпочтительного компонента, где вы хотите добавить routerLink во внутреннем HTML
  2. в строке innerHTML используйте свой пользовательский элемент вместо тега <a> как это
<your-custom-element href="/your/link">THE LINK TITLE</your-custom-element>

Таким образом, вы имеете полный контроль над связью маршрутизатора и все еще используете innerHTML с контентом из внешнего (доверенного) источника.

Поделиться
0

Вы пробовали другие синтаксисы routerLink, чтобы увидеть, будет ли интерпретатор действовать по-другому?

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

вместо вашего

<a routerlink="/one">ONE</a>
Поделиться
-2

Вы должны вернуть <a href="/one">ONE</a> вместо <a routerLink="/one">ONE</a> с сервера.

Я пробовал это, и это работает на меня.

Поделиться
  • 1
    Чтобы перезагрузить приложение, я ищу некоторые решения с использованием routerLink в теге innerhtml.
  • 0
    ваше решение не работает, routerLink после complie отображается как routerlink с буквой "L"
-2

Я действительно не знаю, чего вы пытаетесь достичь здесь, но вы не должны получать весь фрагмент кода из бэкэнда. Вместо этого просто получите значение "один" и используйте интерполяцию на стороне клиента для генерации <a routerLink="/one">ONE</a>:

В шаблоне:

<a routerLink="value">{{value}}</a>
Поделиться
  • 0
    Это CMS. Пользователь имеет редактор wysiwyg и может создать целый раздел страницы, включая HTML и ссылки.
  • 0
    Это стандартное поведение DOM. Нет реального решения, так как оно всегда будет преобразовано в строчные буквы. Что вы можете сделать, это сгенерировать (click) = "method (value)", а затем обработать навигацию этого маршрутизатора в этом методе с аргументом value в качестве целевого маршрута.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню