前言
由于在之前有个项目需要实现一键复制功能,一开始大多数都会想着自己用js手写封着。后来发现angular有个机制,可以很简单的实现一键复制功能。
背景
Angular 的口号是 - “一套框架,多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)”,即 Angular 是支持开发跨平台的应用,比如:Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer 、抽象类 RootRenderer 等。此外还定义了以下引用类型:ElementRef、TemplateRef、ViewRef 、ComponentRef 和 ViewContainerRef 等。下面我们就来分析一下 ElementRef 类:
ElementRef作用
在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们的应用无法运行在不同环境,如 web worker 中,因为在 web worker 环境中,是不能直接操作 DOM。对web worker 有兴趣的可以去阅读了解下支持的类和方法。通过 ElementRef 我们就可以封装不同平台下视图层中的 native 元素 (在浏览器环境中,native 元素通常是指 DOM 元素),最后借助于 Angular 提供的强大的依赖注入特性,我们就可以轻松地访问到 native 元素。
首先,先对比下之前写的
<p id="copyText" title="内容" (click)="isShow = true" *ngIf="!isShow">内容</p>
<textarea id="copyUp" (click)="isShow = false" *ngIf="isShow"> 内容</textarea>
<span (click)="copyUrl(isShow ? 'copyUp' : 'copyText')">复制</span>