如何在 Angular 项目中安装 bulma-tagsinput 扩展？

Question

我正在尝试在我的 Angular 项目中安装 bulma-tagsinput 但没有成功。

下面我做的步骤：

1. 使用 npm i bulma-tagsinput
安装软件包
2. 在我的 angular.json
中声明 bulma-tagsinput.min.js

"scripts": ["./node_modules/bulma-tagsinput/dist/js/bulma-tagsinput.min.js"]

3. 在我的 main.ts 中，导入扩展和 运行 附加命令

import * as bulmaTagsinput from 'bulma-tagsinput';

bulmaTagsinput.attach();

4. 在 bulma
之后的 sass 文件中添加扩展名

@import "~bulma";

@import '~bulma-tagsinput/dist/css/bulma-tagsinput';

5. 在文本中而不是在标签中查看结果

还有其他事情要做吗？

Answer 1

所描述的模块 bulma-tagsinput 不适用于 Angular。

main.ts 文件是 Angular 的脚本加载器，并在 Angular 启动后立即启动模块 bulma-tagsinput。但是 Angular 还没有将任何元素渲染到 DOM 中。所以最好为 Angular.

使用 Tags-Input-Implementation

例如使用 Angular Material，它包含用于构建标签输入元素的组件和指令。他们称之为筹码：

https://material.angular.io/components/chips/overview

Answer 2

我找到了一种将扩展添加到我的项目的方法。

必须在使用 bulmaTagsinput 的组件中导入扩展和附加命令声明。 （不在main.ts）

例如：

• foo.component.ts

  import * as bulmaTagsinput from 'bulma-tagsinput';
  
  ngOnInit() {
  
    /* some code */
  
    bulmaTagsinput.attach();
  }
  

• foo.component.html

  <input class="input" type="tags" placeholder="Add Tag" value="Tag1,Tag2,Tag3">
  

但是

在将输入与表单控件元素绑定后，我无法获取输入的值。我的价值观总是未定义，所以我猜 bulma-tagsinput 不适用于 Angular...