How do toggle Angular2 use bootstrap 4 modal

前言

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

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

使用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 元素。

参考文章

stackoverflow