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

Question

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

按照我的步骤进行操作

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

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

1. 在我的main.ts中，导入扩展名并运行Attach命令

import * as bulmaTagsinput from 'bulma-tagsinput';

bulmaTagsinput.attach();

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

@import "~bulma";

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

1. 以文本而不是标签形式查看结果

还有其他事情要做吗？

Answer 1

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

main.ts文件包含Angular的脚本加载器，并在Angular启动后立即启动Module bulma-tagsinput。但是Angular尚未在DOM中呈现任何元素。因此最好为Angular使用标签输入实现。

例如，使用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一起使用...