angular - Angular4 routerLink içindeki innerHTML küçük harfe dönüştü

Sunucudan sayfanın içeriğini aldığım bir cmd’im var. İçerik HTML ve bağlantılar içerebilir. Sorun şu ki bu veriyi görüntülediğimde bağlantılar çalışmıyor. Sayfa kaynağına bakıldığında `routerLink`’in `router link` olarak dönüştürüldüğü ortaya çıkıyor ve muhtemelen bu yüzden çalışmıyor. İşte benim kodum:

Sınıfım, routerLink'in burada camelcase olduğunu fark edin:

export class TwoComponent implements OnInit {
  data = '<a routerLink="/one">ONE</a>'; //this will actually come from backend server

  constructor() { }

  ngOnInit() {}
}

Ve benim html'im:

<div [innerHTML]="data | bypassSecurity"></div>

Ve bu sayfayı yüklediğimde ve kaynağa baktığımda routerLink artık küçük harflerle:

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

İlk başta sorumlu olanın bypassSecurity borusu olduğunu düşündüm ama borunun çıktısını kontrol ettim ve routerLink hâlâ orada camel case olarak duruyordu. Yani görünüşe göre bu başka bir yerde oluyor. Her ihtimale karşı işte benim bypassSecurity borum da:

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

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

Bu küçük harfe dönüştürmenin nerede ve neden gerçekleştiği konusunda herhangi bir tavsiye takdir edilir :)

Cevap #1

jcdsr'nin çözümü bana çok yardımcı oldu. Bunu DomSanitizer ile kullanarak çalıştırmayı başardım.

İşte nasıl yaptım:

RotaDönüştürücüYönergesi

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

};

Bileşen

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

public html: SafeHtml;

constructor(private sanitizer: DomSanitizer) {
    this.html = sanitizer.bypassSecurityTrustHtml('<a href="/something">Link</a>');
}

Şablon

<div [innerHtml]="html" routeTransformer></div>

Cevap #2

Bu benim çözümüm, sadece html5 özniteliklerini kullanmanız yeterli.

şablonda:

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

bileşende:

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

veya direktif olarak,

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

            }


        }

şablon üzerinde direktif olarak:

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

dezavantajlar: