routerLinkはパイプ経由で生成された場合には動作しません

Question

#hashtagintに任意の単語を作成できるパイプを作成しようとしています。

これは#tagsをURLに変換するパイプ内の関数です。

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> 

。 DomSanitizer provider with SafeHtmlを使用することにより、[innerHTML]を使用してHTMLを注入しながら

Answer 1

あなたが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; 
    } 

} 

Answer 2

角度は、HTMLを動的に追加処理しません。イベントは、micronyksの説明の方法を使用して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?