angular - मैं घटक टेम्पलेट में किसी तत्व का चयन कैसे कर सकता हूं?




angular2-components typescript (7)

आप अपने तत्व के ElementRef में इंजेक्ट करके ElementRef माध्यम से डोम तत्व को संभाल सकते हैं:

constructor(myElement: ElementRef) { ... }

डॉक्स: https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

क्या किसी को पता है कि घटक टेम्पलेट में परिभाषित तत्व को कैसे पकड़ना है? पॉलिमर $ और $$ $ साथ वास्तव में आसान बनाता है।

मैं बस यह सोच रहा था कि कोणीय में इसके बारे में कैसे जाना जाए।

ट्यूटोरियल से उदाहरण लें:

import {Component} from '@angular/core'

@Component({
    selector:'display'
    template:`
     <input #myname(input)="updateName(myname.value)"/>
     <p>My name : {{myName}}</p>
    `

})
export class DisplayComponent {
    myName: string = "Aman";
    updateName(input: String) {
        this.myName = input;
    }
}

मैं कक्षा परिभाषा के भीतर से p या input तत्व के संदर्भ को कैसे पकड़ सकता हूं?


तत्काल अगले भाई पाने के लिए, इस का उपयोग करें

event.source._elementRef.nativeElement.nextElementSibling

सूची से लक्ष्य तत्व का चयन करना। समान तत्वों की सूची से विशेष तत्व का चयन करना आसान है।

घटक कोड:

export class AppComponent {
  title = 'app';

  listEvents = [
    {'name':'item1', 'class': ''}, {'name':'item2', 'class': ''},
    {'name':'item3', 'class': ''}, {'name':'item4', 'class': ''}
  ];

  selectElement(item: string, value: number) {
    console.log("item="+item+" value="+value);
    if(this.listEvents[value].class == "") {
      this.listEvents[value].class='selected';
    } else {
      this.listEvents[value].class= '';
    }
  }
}

HTML कोड:

<ul *ngFor="let event of listEvents; let i = index">
   <li  (click)="selectElement(event.name, i)" [class]="event.class">
  {{ event.name }}
</li>

सीएसएस कोड:

.selected {
  color: red;
  background:blue;
}

*ngIf या *ngSwitchCase अंदर घटक उदाहरण को हथियाने की कोशिश कर रहे लोगों के लिए, आप इस ट्रिक को फॉलो कर सकते हैं।

एक init निर्देश बनाएँ।

import {
    Directive,
    EventEmitter,
    Output,
    OnInit,
    ElementRef
} from '@angular/core';

@Directive({
    selector: '[init]'
})
export class InitDirective implements OnInit {
    constructor(private ref: ElementRef) {}

    @Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    ngOnInit() {
        this.init.emit(this.ref);
    }
}

अपने कंपोनेंट को myComponent जैसे नाम के साथ निर्यात करें

@Component({
    selector: 'wm-my-component',
    templateUrl: 'my-component.component.html',
    styleUrls: ['my-component.component.css'],
    exportAs: 'myComponent'
})
export class MyComponent { ... }

ElementRef और MyComponent उदाहरण प्राप्त करने के लिए इस टेम्पलेट का उपयोग करें

<div [ngSwitch]="type">
    <wm-my-component
           #myComponent="myComponent"
           *ngSwitchCase="Type.MyType"
           (init)="init($event, myComponent)">
    </wm-my-component>
</div>

इस कोड का उपयोग टाइपस्क्रिप्ट में करें

init(myComponentRef: ElementRef, myComponent: MyComponent) {
}

ViewChild डेकोरेटर को @angular/core से आयात करें, जैसे:

HTML कोड:

<form #f="ngForm"> 
  ... 
  ... 
</form>

टीएस कोड:

import { ViewChild } from '@angular/core';

class TemplateFormComponent {

  @ViewChild('f') myForm: any;
    .
    .
    .
}

अब आप 'myForm' ऑब्जेक्ट का उपयोग कक्षा में इसके किसी भी तत्व तक पहुँचने के लिए कर सकते हैं।

Source


कोणीय 4+ : तत्व तक पहुंचने के लिए CSS चयनकर्ता के साथ renderer.selectRootElement .selectRootElement का उपयोग करें।

मुझे एक फॉर्म मिला है जो शुरू में एक ईमेल इनपुट प्रदर्शित करता है। ईमेल दर्ज किए जाने के बाद, प्रपत्र को उनके प्रोजेक्ट से संबंधित जानकारी जोड़ने के लिए उन्हें जारी रखने की अनुमति देने के लिए विस्तारित किया जाएगा। हालांकि, यदि वे एक मौजूदा ग्राहक नहीं हैं, तो फॉर्म में प्रोजेक्ट जानकारी अनुभाग के ऊपर एक पता अनुभाग शामिल होगा।

अब तक, डेटा प्रविष्टि भाग को घटकों में विभाजित नहीं किया गया है, इसलिए अनुभाग * ngIf निर्देशों के साथ प्रबंधित किए जाते हैं। मुझे प्रोजेक्ट नोट फ़ील्ड पर ध्यान देने की ज़रूरत है यदि वे एक मौजूदा ग्राहक हैं, या पहला नाम फ़ील्ड यदि वे नए हैं।

मैंने बिना किसी सफलता के समाधान की कोशिश की। हालाँकि, this उत्तर में अपडेट 3 ने मुझे अंततः समाधान का आधा हिस्सा दिया। अन्य आधे this धागे में MatteoNY की प्रतिक्रिया से आए। परिणाम यह है:

import { NgZone, Renderer } from '@angular/core';

constructor(private ngZone: NgZone, private renderer: Renderer) {}

setFocus(selector: string): void {
    this.ngZone.runOutsideAngular(() => {
        setTimeout(() => {
            this.renderer.selectRootElement(selector).focus();
        }, 0);
    });
}

submitEmail(email: string): void {
    // Verify existence of customer
    ...
    if (this.newCustomer) {
        this.setFocus('#firstname');
    } else {
        this.setFocus('#description');
    }
}

चूंकि केवल एक चीज जो मैं कर रहा हूं, वह एक तत्व पर ध्यान केंद्रित कर रहा है, मुझे परिवर्तन का पता लगाने के साथ खुद को चिंता करने की आवश्यकता नहीं है, इसलिए मैं वास्तव में कोणीय के बाहर renderer.selectRootElement कॉल चला सकता हूं। क्योंकि मुझे नए अनुभागों को प्रस्तुत करने के लिए समय देने की आवश्यकता है, तत्व चयन का प्रयास करने से पहले रेंडरिंग थ्रेड्स को पकड़ने की अनुमति देने के लिए तत्व अनुभाग को समय-समय पर लपेटा जाता है। एक बार जो सब सेटअप हो जाता है, मैं बस मूल सीएसएस चयनकर्ताओं का उपयोग करके तत्व को कॉल कर सकता हूं।

मुझे पता है कि यह उदाहरण मुख्य रूप से फ़ोकस इवेंट से संबंधित है, लेकिन मेरे लिए यह कठिन है कि इसका उपयोग अन्य संदर्भों में नहीं किया जा सकता है।


 */
import {Component,ViewChild} from '@angular/core' /*Import View Child*/

@Component({
    selector:'display'
    template:`

     <input #myname (input) = "updateName(myname.value)"/>
     <p> My name : {{myName}}</p>

    `
})
export class DisplayComponent{
  @ViewChild('myname')inputTxt:ElementRef; /*create a view child*/

   myName: string;

    updateName: Function;
    constructor(){

        this.myName = "Aman";
        this.updateName = function(input: String){

            this.inputTxt.nativeElement.value=this.myName; 

            /*assign to it the value*/
        };
    }
}




angular-components