Как избежать добавления префикса "небезопасно" для ссылки на Angular2?

Используя Angular2, существует ли параметр, позволяющий не добавлять в ссылки префикс " небезопасно:". Мне нужно установить ссылки для протокола, который по умолчанию не указан в Angular2, но необходим для нашего внутреннего приложения, поэтому результат недействителен:

<a href="unsafe:Notes://MYSERVER/C1256D3B004057E8" ..

В более старом Angular был compileProvider.aHrefSanitizationWhitelist, но я не могу найти что-то подобное в Angular2.

Ответ 1

Используйте DomSanitizer:

import {DomSanitizer} from '@angular/platform-browser';
...
constructor(private sanitizer:DomSanitizer){}
...
let sanitizedUrl = this.sanitizer.bypassSecurityTrustUrl('Notes://MYSERVER/C1256D3B004057E8');

или создать метод для возврата очищенного URL:

sanitize(url:string){
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

а затем в вашем шаблоне:

<a [href]="sanitize('Notes://MYSERVER/C1256D3B004057E8')" ..

Демо-план

Ответ 2

Другим способом, вы можете создать службу труб для изменения небезопасного URL-адреса для безопасного URL-адреса, поэтому нет необходимости переписывать код во всех компонентах. Создайте сервис-канал с именем safe-url.pipe.ts.

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

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
  constructor(private domSanitizer: DomSanitizer) {}
  transform(url) {
    return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Затем используйте в своем представлении. Пример: <a href="'Notes://MYSERVER/C1256D3B004057E8' | safeUrl"></a>

ПРИМЕЧАНИЕ. Не забудьте ввести эту службу в свой app.module.ts

import { SafeUrlPipe } from './shared/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.

И в разделе объявлений node.

@NgModule({ declarations: [SafeUrlPipe],...});