Angular2에 의한 링크에 "안전하지 않은"접두사를 추가하지 않는 방법은 무엇입니까?

Angular2에 의한 링크에 "안전하지 않은"접두사를 추가하지 않는 방법은 무엇입니까?

---

이 질문에 이미 답변이 있습니다.

• RC.1에서는 바인딩 구문 1 답변을 사용하여 일부 스타일을 추가 할 수 없습니다.

Angular2를 사용하면 링크에 접두사 " 안전하지 않은 : "을 추가 하지 않도록 설정이 있습니까 ? Angular2에서 기본적으로 허용되지 않는 프로토콜에 대한 링크를 설정해야하지만 내부 응용 프로그램에 필요하므로 결과는 잘못된 링크입니다.

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

이전 Angular에는 compileProvider.aHrefSanitizationWhitelist가 있었지만 Angular2에서 비슷한 것을 찾을 수 없습니다.

---

사용 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')" ..

데모 Plunk

---

또 다른 방법으로 안전하지 않은 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.

그리고 노드 모듈 선언 섹션에서.

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

참조 URL : https://stackoverflow.com/questions/37432609/how-to-avoid-adding-prefix-unsafe-to-link-by-angular2