如何将自定义配置传递给ngx-imageviewer

Question

'@ hallysonh / ngx-imageviewer'提供的ImageViewerComponent（ngx-imageviewer）仅通过@Component中的提供者数组接受自定义ImageViewerConfig。

它是这样的：

在wrapper-imageviewer.component.ts（我自己的自定义类）中

const MY_IMAGEVIEWER_CONFIG: ImageViewerConfig = {
  buttonStyle: {
    bgStyle: '#B71C1C' // custom container's background style
  }
};

@Component({
  selector: 'mtab-imageviewer',
  templateUrl: './imageviewer.component.html',
  styleUrls: ['./imageviewer.component.scss'],
  providers: [
    {
      provide: IMAGEVIEWER_CONFIG,
      useValue: MY_IMAGEVIEWER_CONFIG
    }
  ]
})

在ImageViewerComponent中（由ngx-imageviewer使用）

constructor(
    private _sanitizer: DomSanitizer,
    private _renderer: Renderer2,
    private _imageCache: ImageCacheService,
    @Inject(IMAGEVIEWER_CONFIG) private config: ImageViewerConfig
  ) {
     // code here...
}

上面的代码工作得很好，但是事情是我通过包装类中的@Input（）装饰器从另一个组件获取自定义配置，有没有一种方法可以将输入配置传递给父ImageViewerComponent（ngx-imageviewer ）类？

Answer 1

您可以使用MY_IMAGEVIEWER_CONFIG的内容创建一个单独的文件。然后将此文件导入提供程序。因为提供者接受数组。