Angular: URL-адрес дезинфекции с безопасным каналом не возвращает эффективный URL-адрес

Question

В моем приложении Angular 12 у меня есть собственный канал для очистки URL-адресов:

         import { Pipe, PipeTransform } from '@angular/core';
   import {DomSanitizer, SafeUrl} from '@angular/platform-browser';
        
    @Pipe({
      name: 'safeurl'
    })
    export class SafeurlPipe implements PipeTransform {
      constructor(private sanitizer: DomSanitizer) { }
    
      transform(url:string): SafeUrl {
        console.log(this.sanitizer.bypassSecurityTrustUrl(url))
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
      }
    }

В моем компоненте приложения у меня есть настраиваемый элемент, куда я должен динамически вводить URL -адрес в качестве свойства antribute ( «data-url» ) следующим образом:

      <my-element id="myelement" [attr.data-url]="this.myurl+'/registry' | safeurl"></my-element>

Кажется, это не работает должным образом, так как в доме я получаю это:

      <my-element _ngcontent-ofg-c16="" id="my-element" data-url="SafeValue must use [property]=binding: http://dev-ptf.com/registry (see https://g.co/ng/security#xss)"></my-element>

Интересно, что делать, чтобы просто ввести сам URL

console.log в функции канала отображает этот результат как объект:

Что не является моим предполагаемым выходом, который может быть самим URL-адресом

Предложения ??