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