web-dev-qa-db-ja.com

正しい方法Angular 2 RC6でコンポーネントにDomSanitizerを提供する

DomSanitizerを使用してコンポーネント内の動的URLをサニタイズしようとしていますが、このサービスのプロバイダーを指定する正しい方法がわからないようです。

私は Angular 2.0.0-rc.6 を使用しています

現在のコンポーネントは次のとおりです。

@Component({
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ],
    providers: [ DomSanitizer ],
})
export class AppComponent implements OnInit
{
    public url: SafeResourceUrl;

    constructor(private sanitizer: DomSanitizer) {}

    ngOnInit() {
        let id = 'an-id-goes-here';
        let url = `https://www.youtube.com/embed/${id}`;

         this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }

    ngOnDestroy() {}
}

これにより、実行時にエラーthis.sanitizer.bypassSecurityTrustResourceUrl is not a functionが発生します。

DomSanitizerのプロバイダーを適切に提供する方法の例を教えてもらえますか？ありがとう！

javascriptangulartypescriptangular-servicesangular-dom-sanitizer
33
kalmas

宣言する必要はありませんproviders: [ DomSanitizer ]もう]。
次のようにimportDomSanitizer

import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser';

コンポーネントでは、以下のようにコンストラクタを介して注入します。

constructor(private sanitizer: DomSanitizer) {}
53
micronyks

これらをインポート

import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';

変数を定義する

trustedDashboardUrl : SafeUrl;

このようなコンストラクタで使用してください-

constructor(
    private sanitizer: DomSanitizer) {}

このような特定のURL

this.trustedDashboardUrl =
                        this.sanitizer.bypassSecurityTrustResourceUrl
                            ("URL");

これが役立つかどうかを確認してください。

9
Sanket

両方とも動作するはずです

constructor(private sanitizer: DomSanitizer) {}
constructor(private sanitizer: Sanitizer) {}

DomSanitizerを注入すると、このタイプのみがキャストなしで必要なメソッドを提供するため、より適切です。

BrowserModuleをインポートしたことを確認してください

@NgModule({
  imports: [BrowserModule],
})

RC.1では、バインディング構文を使用して一部のスタイルを追加できない も参照してください。

2
Günter Zöchbauer