正确的方法使用 Angular 2 RC6 向组件提供 DomSanitizer

Posted 2023-03-13

【中文标题】正确的方法使用 Angular 2 RC6 向组件提供 DomSanitizer

【英文标题】：Correct way Provide DomSanitizer to Component with Angular 2 RC6

【发布时间】：2017-01-19 04:00:07

【问题描述】：

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

【参考方案1】：

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

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

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

constructor(private sanitizer: DomSanitizer) 

【讨论】：

这是我的问题。我试图使用DomSanitizer 作为提供者。根本没有提供者，它就像一个魅力。谢谢！

如果我尝试使用的组件位于作为子模块的模块内怎么办。在子模块中，我正在导入 CommonModule 而不是 BrowserModule。在这种情况下，我应该如何将 DomSanitizer 提供给子模块内的组件？

@TerNovi 它与Module/Submodule 无关。只需按照组件本身所示导入DOMSanitizer 并使用即可。

好吧，我试过了。我不确定是否是因为子模块实际上是我使用 ng-packagr 构建的库的一部分。我在我的应用程序项目中使用这个库。但是，我仍然收到一条错误消息，说没有为 DomSanitizer 提供提供程序。我最终只是做了一个原生 javascript 实现来替换我试图从 DomSanitizer 使用的操作。我仍在学习创建角度打包库，所以我不确定这是否会影响此处的导入。您有开发库的经验吗？

【参考方案2】：

导入这些-

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

定义变量-

trustedDashboardUrl : SafeUrl;

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

constructor(
    private sanitizer: DomSanitizer) 

这样指定网址-

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

看看这是否有帮助。

【参考方案3】：

两者都应该工作

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

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

确保您已导入BrowserModule

@NgModule(
  imports: [BrowserModule],
)

另见In RC.1 some styles can't be added using binding syntax

【讨论】：

只能是private sanitizer:DomSanitizer

其实两者应该是一样的github.com/angular/angular/blob/…

【参考方案4】：

如果您可以为 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"   viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke- 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>`;
      
    

欲了解更多信息，您可以访问link

【讨论】：

有人知道如何使用 sanatize 方法而不是绕过证券吗？？？