42

我正在尝试使用 DomSanitizer 来清理组件中的动态 URL，但我似乎无法弄清楚为该服务指定 Provider 的正确方法是什么。

我正在使用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 正确提供 Provider 的示例吗？谢谢！

4

4 回答 4

75

你不需要再声明providers: [ DomSanitizer ]了。
只需要如下图，import DomSanitizer

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

在组件中通过构造函数注入它，如下所示，

constructor(private sanitizer: DomSanitizer) {}
于 2016-09-11T16:10:05.553 回答
15

导入这些——

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

定义变量-

trustedDashboardUrl : SafeUrl;

像这样在构造函数中使用它-

constructor(
    private sanitizer: DomSanitizer) {}

像这样指定 URL -

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

看看这是否有帮助。

于 2016-09-11T16:10:36.557 回答
4

两者都应该工作

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

注入DomSanitizer更好，因为只有这种类型才提供必要的方法而无需强制转换。

确保您已导入BrowserModule 

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

另见在 RC.1 中，某些样式无法使用绑定语法添加

于 2016-09-11T16:10:01.257 回答
2

如果您可以为SanitizedHtmlPipe添加自定义管道，则更容易。因为我们可以在 Angular 项目中全局使用：

  • sanitized-html.pipe.ts

    import { Pipe, PipeTransform } from '@angular/core';
    import { DomSanitizer } from '@angular/platform-browser'
    @Pipe({
      name: 'sanitizedHtml'
    })
    export class SanitizedHtmlPipe implements PipeTransform {
      constructor(private sanitized: DomSanitizer) {}
      transform(value: any): any {
        return this.sanitized.bypassSecurityTrustHtml(value);
      }
    }
  • hero.component.html

    <div [innerHTML]="htmlString | sanitizedHtml"></div>
  • hero.component.ts

    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-hero',
      templateUrl: './hero.component.html',
      styleUrls: ['./hero.component.css']
    })
    export class HeroComponent implements OnInit {
      htmlString: any;
      constructor() { }
      ngOnInit(): void {
        this.htmlString = `
        <div class="container">
          <header class="blog-header py-3">
            <div class="row flex-nowrap justify-content-between align-items-center">
              <div class="col-4 pt-1">
                <a class="text-muted" href="#">Subscribe</a>
              </div>
              <div class="col-4 text-center">
                <a class="blog-header-logo text-dark" href="#">Large</a>
              </div>
              <div class="col-4 d-flex justify-content-end align-items-center">
                <a class="text-muted" href="#">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
                </a>
                <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
              </div>
            </div>
          </header>
        </div>`;
      }
    }

有关更多信息，您可以访问此链接

于 2021-07-15T12:57:47.740 回答