Angular Render2你瞭解嗎？

時間 2020-06-15

標籤 angular render2 render 瞭解欄目 AngularJS 简体版

原文原文鏈接

Render2

介紹

Render2 是angular中用於操做dom的，Angular作了封裝，屏蔽底層差別，通用性更強。不單單能夠用於瀏覽器端，還能夠用於Server Side rendering, Web-Worker, mobile apps, and desktop apps等。css

Render2之指令用法

setStyle、removeStyle

# 定義指令
   import { Directive, ElementRef, OnInit, Renderer2, HostListener } from '@angular/core';
   @Directive({ 
       selector: '[animate]' 
   })
   export class Animate  {
   constructor(private renderer: Renderer2, private el: ElementRef) {}
       
   @HostListener('click') 
   performTask() {
       let randomColor = "#"+((1<<24)*Math.random()|0).toString(16);
       this.renderer.setStyle(this.el.nativeElement, 'color', randomColor);
       this.renderer.setStyle(this.el.nativeElement, 'background-color', 'black');   
       this.renderer.removeStyle(this.el.nativeElement, 'color','red');   
   }

   }
複製代碼

# html
<h2  animate>Click here to give me a random color</h2>
複製代碼

setAttribute、removeAttribute

@Directive({ 
    selector: '[defaultValue]' 
})
export class DefaultInputValueDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }
  @HostListener('mouseover') 
  onMouseOver() {
      this.renderer.setAttribute(this.elRef.nativeElement, 'value', 'Enter a Value');
  }
  @HostListener('mouseleave') 
  onMouseLeave() {
      this.renderer.removeAttribute(this.elRef.nativeElement, 'value');
  }   
} 
複製代碼

addClass、removeClass

@Directive({ 
    selector: '[hlOnMouseOver]' 
})
export class HlOnMouseOverDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }
  @HostListener('mouseover') 
  onMouseOver() {
      this.renderer.addClass(this.elRef.nativeElement, 'hl-text');
  }
  @HostListener('mouseleave') 
  onMouseLeave() {
      this.renderer.removeClass(this.elRef.nativeElement, 'hl-text');
  }   
}
複製代碼

removeChild、appendChild

@Directive({ 
    selector: '[removeChild]' 
})
export class RemoveChildDirective {
  constructor(private elRef: ElementRef, private renderer: Renderer2) {
  }
  p = this.renderer.createElement('p');
  text = this.renderer.createText('Hello World !');
  
  @HostListener('mouseover') 
  onMouseOver() {
      this.renderer.appendChild(this.p, this.text);  
      this.renderer.appendChild(this.elRef.nativeElement, this.p);
  }
  @HostListener('mouseleave') 
  onMouseLeave() {
      this.renderer.removeChild(this.elRef.nativeElement, this.p);
  }   
}
複製代碼

setProperty

@Directive({ 
    selector: '[imgAlt]' 
})
export class ImageAltdDirective {
  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnInit() {
    this.renderer.setProperty(this.elRef.nativeElement, 'alt', 'image description');
  }

}
複製代碼

Render2之組件用法 - 大部分構造方法只有Renderer2

viewChild操做dom appendChild

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
   selector: 'app-component',
   template: `<ul class="col-md-2">
                <li (click)="addBtn()" #addButton>Click here to add new button</li>
              </ul> 
              `
})

export class AppComponent { 
   @ViewChild('addButton') 
   private animateThis: ElementRef;	
   constructor(private renderer: Renderer2) {}
   
   addBtn() {
     const button = this.renderer.createElement('button'); 
     const buttonText = this.renderer.createText('This is a button');
     this.renderer.appendChild(button, buttonText);
     this.renderer.appendChild(this.animateThis.nativeElement, button);
   }
} 
複製代碼

# html
<ul class="col-md-2">
  <li (click)="addBtn()" #addButton>Click here to add new button</li>
</ul> 
複製代碼

insertBefore 、createComment

import { Component, ElementRef, Renderer2, ViewChild } from '@angular/core';

@Component({
   selector: 'app-component',
   template: `<ul class="col-md-2">
                <li (click)="addBtn()" #addButton>Click here to add new button</li>
              </ul> 
              `
})

export class AppComponent { 
   @ViewChild('addButton') 
   private animateThis: ElementRef;	
   constructor(private elRef: ElementRef, private renderer: Renderer2) {}
   
   addBtn() {
     const button = this.renderer.createElement('button'); 
     const buttonText = this.renderer.createText('This is a button');
     const comment = this.renderer.createComment('createComment? Comment Created!');
     const parent = this.elRef.nativeElement.parentNode;
     const reference = this.elRef.nativeElement;
     this.renderer.appendChild(button, buttonText);
     this.renderer.insertBefore(parent, comment, reference )
     this.renderer.appendChild(this.animateThis.nativeElement, button);
   }
} 
複製代碼

setStyle

import { Component, ViewChild, ElementRef, Renderer2  } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    Username: 
    <input type="text" placeholder="type your name..."  #changeStyle>
  `,
})
export class AppComponent  {
   @ViewChild('changeStyle') 
   private elRef: ElementRef;	
   constructor(private renderer: Renderer2) {}
   
   ngOnInit() {
     this.renderer.setStyle(this.elRef.nativeElement, 'border', '1px solid red');
   }
}
複製代碼

addClass

import { Component, ViewChild, ElementRef, Renderer2  } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    Username: 
    <input type="text" placeholder="type your name..."  #changeStyle>
  `,
})
export class AppComponent  {
   @ViewChild('changeStyle') 
   private elRef: ElementRef;	
   constructor(private renderer: Renderer2) {}
   
   ngOnInit() {
     this.renderer.addClass(this.elRef.nativeElement, 'someClass');
   }
  
  //HTML output
  //<input placeholder="type your name..." type="text" class="someClass">
}
複製代碼

setAttribute

import { Component, ViewChild, ElementRef, Renderer2  } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    Username: 
    <input type="text" placeholder="type your name..."  #changeStyle>
  `,
})
export class AppComponent  {
   @ViewChild('changeStyle') 
   private elRef: ElementRef;	
   constructor(private renderer: Renderer2) {}
   
   ngOnInit() {
     this.renderer.setAttribute(this.elRef.nativeElement, 'value', 'Gokhan');
   }
}
複製代碼

setProperty

import { Component, ViewChild, ElementRef, Renderer2  } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    Username: 
    <input type="text" placeholder="type your name..."  #changeStyle>
  `,
})
export class AppComponent  {
   @ViewChild('changeStyle') 
   private elRef: ElementRef;	
   constructor(private renderer: Renderer2) {}
   
   ngOnInit() {
      this.renderer.setProperty(this.elRef.nativeElement, 'disabled', 'disabled');
      this.renderer.setProperty(this.elRef.nativeElement, 'innerHTML', change the inner html'); } } 複製代碼

nextSibling

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

@Component({
  selector: 'my-app',
  template: `
    <p #next>First</p>
    <p>Second</p>
    <p>Third</p>
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  @ViewChild('next') 
  private elRef: ElementRef;	
  constructor(private renderer: Renderer2) {}

  ngOnInit(){
    const currentElement = this.elRef.nativeElement;
    const nextEl = this.renderer.nextSibling(currentElement);
    this.renderer.addClass(nextEl, 'red');
  }

}
複製代碼

parentNode

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

@Component({
  selector: 'my-app',
  template: `
    <div>
      <p #parent>First</p>
      <p>Second</p>
      <p>Third</p>
    </div>
      `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  @ViewChild('parent') 
  private elRef: ElementRef;	
  constructor(private renderer: Renderer2) {}

  ngOnInit(){
    const currentElement = this.elRef.nativeElement;
    const parent = this.renderer.parentNode(currentElement);
    this.renderer.addClass(parent, 'red');
  }

}
複製代碼

selectRootElement

# selectRootElement(selectorOrNode: any, preserveContent?: boolean) - 是否保留子內容

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

@Component({
  selector: 'my-app',
  template: `
        <div #root>
        X or Y?
        </div> 
        <button (click)="changeIt()">Click</button>
      `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  switchText: boolean = false;
  @ViewChild('root') 
  private elRef: ElementRef;	
  constructor(private renderer: Renderer2) {}
  changeIt(){
    this.switchText = !this.switchText;
    const rootEl = this.elRef.nativeElement;
    const text = this.switchText ? 
      this.renderer.createText('Hey X!') :
      this.renderer.createText('Hey Y!');
    this.renderer.selectRootElement(rootEl); 
    this.renderer.appendChild(rootEl, text)
  }

}
複製代碼

# 源碼
selectRootElement(selector: string): Element {
    var el = DOM.querySelector(this._rootRenderer.document, selector);
    if (isBlank(el)) {
      throw new BaseException(`The selector "${selector}" did not match any elements`);
    }
    DOM.clearNodes(el);
    return el;
 }
複製代碼

listen

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <p #listen>
      Hover to see some magic!
    </p>
    {{count}}
  `,
})
export class AppComponent  {
  @ViewChild('listen') 
    private elRef: ElementRef;	
    constructor(private renderer: Renderer2) {
    }
    toggle = false; 
    count = 0;  
    ngAfterViewInit() {
    this.renderer.listen(this.elRef.nativeElement, 'mouseover', () => {
      this.toggle = !this.toggle;
      this.count++;
      const currentElement = this.elRef.nativeElement;
      const firstText = this.renderer.createText('Hover to see new text! (Hover me)');
      const secondText = this.renderer.createText('Text changed! (Hover me)');
      const thirdText = this.renderer.createText('Reached maximum count!');

      this.renderer.selectRootElement(currentElement);
      if(this.count < 10){
          this.toggle ? this.renderer.appendChild(currentElement, secondText) : 
          this.renderer.appendChild(currentElement, firstText);
      } else {
          this.renderer.appendChild(currentElement, thirdText);
          this.count = 10;
      }

    });
  }
}
複製代碼

參考

Angular Render2

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。