4

前言

借鉴,是一门学问。 参考文章

本组件是借鉴与思否的添加标签来实现的,很简单。

使用Bootstrap的模态框,再创建标签时,创建完成应该隐藏该模态框,在Angular Component使用Bootstrap模态框中Methods时,遇到一些小的问题!!!

image.png

实现效果:

3.gif

引入Bootstrap.js与jquery

首先想要使Bootstrap中模态框生效需要在Angular.json文件下添加Bootstrap.jsjquery,前提是先npm

image.png

jquery一定要放在Bootstrap的前面,否则的话会出现以下的错误

image.png

Angular中使用bootstrap 4 Methods

3.gif

想在创建完标签时就不显示模态框了,Bootstrap上给出了方法

image.png

就直接复制到代码上了

image.png

报错:

image.png

找不到Module,尝试区引入该Module,但是并没有该Module,所以换了关键字Goole,解决方法如下

解决办法

我们可以使用@ViewChild()装饰器获取组件中模态框的引用,将其与jQuery一起使用,然后调用Bootstrap模态框中.modal()方法。在模板中声明局部变量,例如 #myModal

image.png

通过@ViewChild()装饰器在组件中使用它

image.png

如果.modal()方法给出错误提示:.modal is not a function

image.png

那么,只需在组件文件中声明一个jQuery变量,如下。

declare var jQuery:any;

@Component({
 ...
})
export class TagSelectComponent implements OnInit{
 ...
}

效果如下:

3.gif

ElementRef 的作用

在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 web worker 中,因为在 web worker 环境中,是不能直接操作 DOM。通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular 提供的强大的依赖注入特性,我们就可以轻松地访问到 native 元素。

参考文章

stackoverflow


潘佳琦
894 声望34 粉丝

为 API 生,为框架死,为 debug 奋斗一辈子;