bs-custom-file-input 不适用于 Angular

Question

我正在尝试在 Angular (7) 应用程序中使用 bs-custom-file-input，但它没有按预期工作。选择文件后，文件名未按预期显示在标签上。

我设置模块的步骤在哪里：

安装 bs-custom-file-input:

npm install bs-custom-file-input --save

将其导入我的组件：

import bsCustomFileInput from 'bs-custom-file-input';

初始化插件：

ngOnInit() { bsCustomFileInput.init(); }
HTML:

<div class="custom-file">
  <input id="inputGroupFile01" type="file" class="custom-file-input">
  <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>

我在这里错过了什么？

Answer 1

Bootstrap documentation 表示

We hide the default file <input> via opacity and instead style the <label>.

这意味着当 <input> 字段的值发生变化时，您必须自己更新 <label> 的 innerHTML。

This article by Alain Boudard 提供了有关如何使其在 angular 中工作的代码示例。

bs-custom-file-input 不适用于 Angular

bs-custom-file-input not working with Angular

bootstrap-4

angular

angular7