當通過管道生成時，routerLink不起作用

我正在嘗試編寫一個管道，可以用#hashtaginto製作任意字樣的網址，就像twitter一樣。當通過管道生成時，routerLink不起作用

這是在我的管道中生成將#tags轉換爲網址的功能。

urlifyHashtags(_text) : String { 
let hashtagRegex = /^#([a-zA-Z0-9]+)/g; 
let tempText = _text.replace(hashtagRegex, " <a [routerLink]=\"['/search/hash/aaa']\" routerLinkActive=\"active-link\">#$1</a>"); 
var hashtagRegex2 = /([^&])#([a-zA-Z0-9]+)/g; 
tempText = tempText.replace(hashtagRegex2, "<a [routerLink]=\"['/search/hash/' , 'Russ']\" routerLinkActive=\"active-link\"> #$2</a>"); 
return tempText; 
}

而這正是它去：

<p *ngIf="!editable" [innerHTML] ="item.body | bodyHashtag"></p>

任何幫助/建議大加讚賞。

來源

2017-08-29 Hadi

檢查瀏覽器的控制檯解釋運行時就像添加組件。你是否收到安全錯誤？ – micronyks

是的！「警告：消毒HTML會剝離一些內容（請參閱http://g.co/ng/security#xss）。」我需要做什麼？ – Hadi

您必須在使用[innerHTML]注入HTML時使用DomSanitizer provider with SafeHtml清理HTML。

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


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

    transform(value: string): SafeHtml{ 
     return this.sanitized 
        .bypassSecurityTrustHtml(this.urlifyHashtags(value)); 
    } 

    urlifyHashtags(_text) : String { 
      let hashtagRegex = /^#([a-zA-Z0-9]+)/g; 
      let tempText = _text.replace(hashtagRegex,"<a [routerLink]=\"['/search/hash/aaa']\" routerLinkActive=\"active-link\">#$1</a>"); 
      var hashtagRegex2 = /([^&])#([a-zA-Z0-9]+)/g; 
      tempText = tempText.replace(hashtagRegex2, "<a [routerLink]=\"['/search/hash/' , 'Russ']\" routerLinkActive=\"active-link\"> #$2</a>"); 
      return tempText; 
    } 

}

來源

2017-08-29 15:59:42 micronyks

謝謝，但甘特是正確的。您的解決方案有助於繞過角度安全模型，但routerLink不起作用 – Hadi

角不處理HTML動態地添加。儘管您可以使用kbyks解釋的方法添加HTML，但Angular不會通過此HTML創建路由器鏈接。 Angular只處理用於靜態添加到組件模板的HTML的HTML（用於安全目的除外）。

你能雖然做的是創建一個綁定值動態

<a [routerLink]="someStringFromComponentClass" routerLinkActive="active-link">{{boundValue}}</a>

如果您確實需要動態地建立這一點，你可以創建並在How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

來源

2017-08-29 16:03:09

正確！現在我沒有得到安全錯誤，但它也沒有像URL一樣工作。 – Hadi

雖然我不確定我是否理解你的解決方案：（對不起，我是新來的角 – Hadi

同意!!我沒有考慮它@Hadi如果你在HTML中添加一個角度上下文，它不會工作和'[routerLink]'是角度功能的一部分 – micronyks

當通過管道生成時，routerLink不起作用

回答

相關問題