zoukankan      html  css  js  c++  java
  • [Angular] Using the platform agnostic Renderer & ElementRef

    ElementRef:

    ElementRef is a way to access native html element, notice that it only works for Broswer.

    Render:

    Render helps to take care of different platforms (mobile or browser). It is recommended to use Render to change DOM instead of using ElementRef directly.

            <label>
              Email address
              <input type="email" name="email" ngModel #email>
            </label>
    export class AuthFormComponent implements AfterViewInit {
    
      @ViewChild('email') email: ElementRef;
    
      constructor(
        private renderer: Renderer
      ) {}
    
      ngAfterViewInit() {
        this.renderer.setElementAttribute(this.email.nativeElement, 'placeholder', 'Enter your email address');
        this.renderer.setElementClass(this.email.nativeElement, 'email', true);
        this.renderer.invokeElementMethod(this.email.nativeElement, 'focus');
        // this.email.nativeElement.setAttribute('placeholder', 'Enter your email address');
        // this.email.nativeElement.classList.add('email');
        // this.email.nativeElement.focus();
      }
    
    ...
    
    }

    Another example:

    this.loadingService.duration: '2s'

    //from   
      this.el.nativeElement.style.setProperty(
          "--duration",
          this.loadingService.duration
        );
    
    
    // to
        this.render.setAttribute(
          this.el.nativeElement,
          "style",
          `--duration:${this.loadingService.duration}`
        );
  • 相关阅读:
    ASP.NET MVC 3: Razor中的@:和语法
    如何设置VS的代码智能提示
    七次
    不知不觉
    一切一切
    什么是喜欢
    Oracle的substr函数简单用法与substring区别
    前端必读:浏览器内部工作原理(转载)
    sublime text 插件安装 Mac版的
    一个随机上翻的小效果
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6436461.html
Copyright © 2011-2022 走看看