zoukankan      html  css  js  c++  java
  • Angular ElementRef详解

    一.为什么要用ElementRef

               Angular 的口号是 - "一套框架,多种平台。同时适用手机与桌面 (One framework.Mobile & desktop.)",即 Angular 是支持开发跨平台的应用,比如:Web 应用、移动 Web 应用、原生移动应用和原生桌面应用等。

              为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口。如定义了抽象类 Renderer(已废弃,现在用Renderer2) 、抽象类 RootRenderer 等。此外还定义了以下引用类型:

                1. ElementRef;

                2.TemplateRef;

                3.ViewRef ;

                4.ComponentRef ;

                5.ViewContainerRef ;

    二.ElementRef有什么作用

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

    三.如何使用ElementRef

              先看需求:我们要实现一个组件成功加载另一个组件(本文中是遮罩的组件)并渲染完成后,改变遮罩文字层div的样式,接下来请看我是如何实现的;

              1.引入相关api

    import {Component, OnInit, Input, Output, EventEmitter, AfterViewInit, ElementRef, ViewChild, Renderer2} from '@angular/core';

             2.构造函数依赖注入

    constructor( private elementRef: ElementRef,
                  private renderer: Renderer2) {
      }

           3.使用属性装饰符@ViewChild

    <div class="contents" [innerHTML]="content | translate" #divContent>
    </div>

       

    @ViewChild('divContent') greetDiv: ElementRef;

          4.设置相关样式

    ngAfterViewInit() {
        this.renderer.setStyle(this.greetDiv.nativeElement, 'width', '3.60rem');
    }
    

      

  • 相关阅读:
    redis 命令行 操作
    redis php sort 函数
    redis php 实例二
    redis php 实例一
    redis 分布式,主从同步
    inux redis 安装配置, 以及redis php扩展
    linux memcache 安装
    推荐linux命令在线查,简约而不简单
    基于Bootstrap样式的 jQuery UI 控件 (v0.5).
    C语言中文网
  • 原文地址:https://www.cnblogs.com/robinw666/p/10830794.html
Copyright © 2011-2022 走看看