angular - angular5 测试 - iframe 安全管道 - bypassSecurityTrustResourceUrl 不是函数 - 错误

Question

我有 Angular5 项目，我们正在使用 iframe 和 Safe Pipe（使用 DomSanitizer.bypassSecurityTrustResourceUrl 转换站点 url 的自定义管道）在我们的组件中加载外部站点。应用程序运行良好（通过加载站点内容）。

在编写测试用例时，我们遇到了错误。

Chrome 66.0.3359 (Windows 10 0.0.0) DummyComponent toggle button check FAILED
    TypeError: this.sanitizer.bypassSecurityTrustResourceUrl is not a function
        at SafePipe.transform (webpack:///./src/app/safe.pipe.ts?:21:31)

这是整个测试用例引导启动。

describe('DummyComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        BrowserModule,
        HttpClientTestingModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        NoopAnimationsModule,
        TranslateModule.forRoot()],
      declarations: [DummyComponent, SafePipe],
      providers: [NotificationService, TranslateService, DomSanitizer],
    }).compileComponents();
  });

   it('load content', () => {
     // expecting content is loading
     ....
   }

}

Answer 1

可能是您在调用的pipe地方没有分配pipe要使用的类型。在组件 HTML 中确保它类似于

<div [innerHTML]="description | safe: 'html'"></div> 

这里重要的是，之后| safe:有DomSanitizer要应用的类型。