Question

我正在尝试编写一个管道，可以使用#hashtagin来创建一个与twitter完全相同的URL。

这是我的管道中的函数，它将#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>

非常感谢任何帮助/建议。

Answer 1

使用 [innerHTML] ，使用DomSanitizer provider with SafeHtml注入HTML时，您必须清理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

Angular不会处理动态添加的HTML。事件尽管您可以使用micryks解释的方法添加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?中所述

通过管道

2 个答案: