meaning - angularjs tutorial pdf




कोणीय 2 में मुख्य तत्व कैसे प्राप्त करें (2)

इस सवाल का पहले से ही यहाँ एक जवाब है:

मेरे पास एक घटक है जिसमें एक p तत्व है। इसकी onClick घटना इसे एक textarea बदल देगी ताकि उपयोगकर्ता डेटा को संपादित कर सके। मेरा सवाल यह है कि:

  • मैं कैसे टेक्सारिया पर ध्यान केंद्रित कर सकता हूं?
  • मैं तत्व तक कैसे पहुंच सकता हूं इसलिए मैं इस पर .focus () को लागू कर सकता हूं?
  • क्या मैं document.getElemenntById () का उपयोग करने से बच सकता हूं?

मैंने "ElementRef" और "@ViewChild ()" का उपयोग करने की कोशिश की है, लेकिन ऐसा लगता है कि मुझे कुछ याद आ रहा है:

// ------ THE CLASS
@ViewChild('tasknoteId') taskNoteRef:ElementRef;

  noteEditMode: boolean = false;

 get isShowNote (){
    return  !this.noteEditMode && this.todo.note  ? true : false;
  }
  taskNote: string;
  toggleNoteEditMode () {
    this.noteEditMode = !this.noteEditMode;
      this.renderer.invokeElementMethod(this.taskNoteRef.nativeElement,'focus');
  }

// ------ THE COMPONENT
<span class="the-insert">
      <form [hidden]="!noteEditMode && todo.note">
        <textarea #tasknoteId id="tasknote"
                  name="tasknote"
                  [(ngModel)]="todo.note"
                  placeholder="{{ notePlaceholder }}"
                  style="background-color:pink"
                  (blur)="updateNote()" (click)="toggleNoteEditMode()"
                  [autofocus]="noteEditMode"
                  [innerHTML]="todo.note">
        </textarea>
      </form>
     </span>


जैसा कि यहाँ दिखाया गया है, #Localvariable के साथ ViewChild का उपयोग करें

<textarea  #someVar  id="tasknote"
                  name="tasknote"
                  [(ngModel)]="taskNote"
                  placeholder="{{ notePlaceholder }}"
                  style="background-color: pink"
                  (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} 

</textarea>

घटक में,

पुराने रास्ते

import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

ngAfterViewInit()
{
   this.el.nativeElement.focus();
}

पुराना तरीका

import {ElementRef} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor(private rd: Renderer) {}
ngAfterViewInit() {
    this.rd.invokeElementMethod(this.el.nativeElement,'focus');
}

22/03 (मार्च) / 2017 को अपडेट किया गया

नया रास्ता

कृपया ध्यान दें कि कोणीय v4.0.0-rc.3 (2017-03-10) से कुछ चीजें बदल दी गई हैं। चूंकि कोणीय टीम invokeElementMethod , invokeElementMethod अब कोड का उपयोग नहीं किया जा सकता है।

ब्रेकिंग चेंजेस

4.0 आरसी .1 से:

Renderer2 का नाम बदलकर Renderer2 करें
RendererTypeV2 का नाम बदलकर RendererType2 करें
RendererFactoryV2 का नाम बदलकर RendererFactory2 करें

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor(private rd: Renderer2) {}

ngAfterViewInit() {
      console.log(this.rd); 
      this.el.nativeElement.focus();      //<<<=====same as oldest way
}

console.log(this.rd) आपको निम्नलिखित तरीके देगा और आप देख सकते हैं कि अब invokeElementMethod नहीं है। Img को संलग्न करना अभी तक यह प्रलेखित नहीं है।

नोट: आप Rendere2 निम्नलिखित तरीकों का उपयोग कर सकते हैं / ViewChild चर के साथ बिना ऐसा करने के लिए।


अद्यतन (रेंडर का उपयोग करके):

ध्यान दें कि मूल रेंडरर सेवा को अब Renderer2 के पक्ष में हटा दिया गया है

Renderer2 आधिकारिक डॉक पर।

इसके अलावा, जैसा कि @ GünterZöchbauer ने बताया:

वास्तव में एलीमेंटरीफ का उपयोग करना ठीक है। इसके अलावा Renderer2 के साथ ElementRef.nativeElement का उपयोग करना ठीक है। जो हतोत्साहित है वह सीधे ElementRef.nativeElement.xxx के गुणों तक पहुँच रहा है।

आप elementRef साथ-साथ elementRef द्वारा भी इसे प्राप्त कर सकते हैं। हालाँकि इसकी वजह से elementRef का उपयोग करने की अनुशंसा नहीं की जाती है:

  • सुरक्षा का मसला
  • कसा हुआ संयोजन

जैसा कि आधिकारिक ng2 प्रलेखन द्वारा बताया गया है।

1. elementRef (डायरेक्ट एक्सेस) का उपयोग करना:

export class MyComponent {    
constructor (private _elementRef : elementRef) {
 this._elementRef.nativeElement.querySelector('textarea').focus();
 }
}

2. ViewChild का उपयोग करना ( बेहतर दृष्टिकोण ):

<textarea  #tasknote name="tasknote" [(ngModel)]="taskNote" placeholder="{{ notePlaceholder }}" 
style="background-color: pink" (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} </textarea> // <-- changes id to local var


export class MyComponent implements AfterViewInit {
  @ViewChild('tasknote') input: ElementRef;

   ngAfterViewInit() {
    this.input.nativeElement.focus();

  }
}

3. renderer का उपयोग करना:

export class MyComponent implements AfterViewInit {
      @ViewChild('tasknote') input: ElementRef;
         constructor(private renderer: Renderer2){           
          }

       ngAfterViewInit() {
       //using selectRootElement instead of depreaced invokeElementMethod
       this.renderer.selectRootElement(this.input["nativeElement"]).focus();
      }

    }





angular