利用Angular elementRef 實作一鍵複制功能

由于在之前有個項目需要實作一鍵複制功能，一開始大多數都會想着自己用 js 手寫封着。後來發現 Angular 有個機制，可以很簡單的實作一鍵複制功能。

Angular 的口号是： “一套架構，多種平台。同時适用手機與桌面 （One framework.Mobile & desktop）”，即 Angular 是支援開發跨平台的應用，比如：Web 應用、移動 Web 應用、原生移動應用和原生桌面應用等。為了能夠支援跨平台，Angular 通過抽象層封裝了不同平台的差異，統一了 API 接口。如定義了抽象類 Renderer 、抽象類 RootRenderer 等。

此外還定義了以下引用類型：ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。

下面我們就來分析一下 ElementRef 類：

在應用層直接操作 DOM，就會造成應用層與渲染層之間強耦合，導緻我們的應用無法運作在不同環境，如 web worker 中，因為在 web worker 環境中，是不能直接操作 DOM。對 web worker 有興趣的可以去閱讀了解下支援的類和方法。

通過 ElementRef 我們就可以封裝不同平台下視圖層中的 native 元素 （在浏覽器環境中，native 元素通常是指 DOM 元素），最後借助于 Angular 提供的強大的依賴注入特性，我們就可以輕松地通路到 native 元素。

首先，先對比下之前寫的

利用添加一個 textarea 标簽，通過 textarea 的 select 方法選中文本，然後再通過浏覽器提供的 copy 指令，将 textarea 中的内容複制下來的方法。

首先，注冊ElementRef

然後，在constructor引入

在利用 Angular 開發的時候可以多學習 Angular 機制，會發現在一些功能的開發上，用好了它自身封好的方法，其實很多地方可以避免不必要代碼，有時寫原生可能會過于繁雜，有些方法卻可以很簡單地幫助我們實作，減少了代碼量。

下期跟大家分享node調試工具的使用，敬請期待~

歡迎各位關注、留言，大家的支援就是我的動力！