前言
借鉴,是一门学问。 参考文章
本组件是借鉴与思否的添加标签来实现的,很简单。
使用Bootstrap
的模态框,再创建标签时,创建完成应该隐藏该模态框,在Angular Component
使用Bootstrap
模态框中Methods
时,遇到一些小的问题!!!
实现效果:
引入Bootstrap.js与jquery
首先想要使Bootstrap
中模态框生效需要在Angular.json
文件下添加Bootstrap.js
与jquery
,前提是先npm
了
注
:jquery
一定要放在Bootstrap
的前面,否则的话会出现以下的错误
Angular中使用bootstrap 4 Methods
想在创建完标签时就不显示模态框了,Bootstrap
上给出了方法
就直接复制到代码上了
报错:
找不到Module
,尝试区引入该Module
,但是并没有该Module
,所以换了关键字Goole
,解决方法如下
解决办法
我们可以使用@ViewChild()
装饰器获取组件中模态框的引用,将其与jQuery
一起使用,然后调用Bootstrap
模态框中.modal()
方法。在模板中声明局部变量,例如 #myModal
通过@ViewChild()
装饰器在组件中使用它
如果.modal()
方法给出错误提示:.modal is not a function
那么,只需在组件文件中声明一个jQuery
变量,如下。
declare var jQuery:any;
@Component({
...
})
export class TagSelectComponent implements OnInit{
...
}
效果如下:
ElementRef 的作用
在应用层直接操作 DOM
,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 web worker
中,因为在 web worker
环境中,是不能直接操作 DOM
。通过 ElementRef
我们就可以封装不同平台下视图层中的 native
元素 (在浏览器环境中,native
元素通常是指 DOM
元素),最后借助于 Angular
提供的强大的依赖注入特性,我们就可以轻松地访问到 native
元素。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。