如何将ngx-clipboard(或任何类似的库)添加到JHipster 6.10 Angular 10的应用程序中?

Question

所以，我已经尝试了 3 或 4 个不同的 ngx-* 库，它们承诺提供将页面内容复制到剪贴板的功能。这是它如何与ngx-clipboard，这似乎是其中最新的，并承诺支持 Angular 10。

步骤：

1. 克隆jhipster-sample-app
2. 运行.mvnw，然后npm start
3. 运行npm install ngx-clipboard --save
4. 将模块添加到导入中，app.module.ts：

import { ClipboardModule } from 'ngx-clipboard';
...
imports: [
...
ClipboardModule,
...
]

4. 将数据模型字段添加到home.component.ts：

fakeValue = 'hi clipboard';

5. 添加了输入和按钮home.component.html：

<input type="text" class="form-control" [(ngModel)]="fakeValue"/>
<button ngxClipboard [cbContent]="fakeValue">Copy</button>

6. >单击"保存";将触发项目重新生成，并发出以下错误：

ERROR in src/main/webapp/app/home/home.component.html:30:30 - error NG8002: Can't bind to 'cbContent' since it isn't a known property of 'button'.
30         <button ngxClipboard [cbContent]="fakeValue">Copy</button>
~~~~~~~~~~~~~~~~~~~~~~~

7. 当然，"复制"按钮不会复制任何内容。

问题：我做错了什么？

PS：此分支(https://github.com/62mkv/jhipster-sample-app/tree/ngx-clipboard)包含上述所有更改。

PPS：npm run build发出相同的错误(+还有关于模板的错误，这是上述错误的结果)

Answer 1

实际上，这个特定的问题似乎是一个非常典型的问题，与几乎所有库的自述文件都只提到app.module.ts有关， 而JHipster应用程序被分成许多模块，以及app.module.ts。对于没有任何角度熟练度的人来说，这是非常令人困惑的......

无论哪种方式，此注释(错误NG8002：无法绑定到"formGroup"，因为它不是"form"的已知属性。在 Angular 9) 中，实际上给出了最具体的答案：

依赖项必须单独导入到每个模块中，因此就我而言，将其导入home.module.ts而不是app.module.ts解决了问题！