document.getElementById कोणीय 4 / टाइपस्क्रिप्ट में प्रतिस्थापन?

95

इसलिए, मेरे अभ्यास कार्य में कोणीय 4 के साथ काम करना और यह मेरे लिए नया है। सौभाग्य से, HTML तत्वों और इसके मूल्यों को पाने के लिए जिनका मैंने उपयोग किया है <HTMLInputElement> document.getElementByIdया <HTMLSelectElement> document.getElementById

Im सोच रहा था कि क्या कोणीय में इसके लिए कोई प्रतिस्थापन है

angular typescript

— नीनो गुटिरेज
स्रोत

2

क्यों नहीं GetElementById का उपयोग करें?

— सुरेन सप्रियन

बस यह सोचकर कि तत्वों को प्राप्त करने का एक कोणीय तरीका है।

— नीनो

151

आप अपने DOM तत्व का उपयोग करके टैग कर सकते हैं #someTag, फिर इसे प्राप्त कर सकते हैं @ViewChild('someTag')।

पूरा उदाहरण देखें:

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

@Component({
    selector: 'app',
    template: `
        <div #myDiv>Some text</div>
    `,
})
export class AppComponent implements AfterViewInit {
    @ViewChild('myDiv') myDiv: ElementRef;

    ngAfterViewInit() {
        console.log(this.myDiv.nativeElement.innerHTML);
    }
}

console.logकुछ पाठ मुद्रित करेगा ।

— अलेक्जेंड्रे एनिक
स्रोत

त्रुटि दिखाता है त्रुटि: '@ कोणीय / कोर / src / मेटाडेटा / di' को हल नहीं कर सकता त्रुटि: '@ कोणीय / कोर / src / linker / element_ref' को हल नहीं कर सकता है

— Nino Gutierrez

2

एनवीएम, इस तरह आयात करके हल किया गया। आयात {Component, OnInit, ViewChild, ElementRef} '@ कोणीय / कोर' से;

— नीनो

20

यह काम नहीं करेगा यदि आपके पास सशर्त डोम तत्व जैसे * ngFor, * ngIf आदि

— रवींद्र थोराट

कोणीय 8+ व्यूहिल्ड डेकोरेटर के लिए दो तर्क की आवश्यकता है ।

अगर हालत सही है तो मैं केवल #myDiv को कैसे जोड़ सकता हूं? '' धन्यवाद: उदाहरण के लिए: आईडी के साथ मैं [id] = "अगर है 'myDiv' कर सकते हैं।

— daniel8x

77

तुम बस इंजेक्षन कर सकते हैं डाक्यूमेंट निर्माता में टोकन और उस पर एक ही कार्यों का उपयोग

import { Inject }  from '@angular/core';
import { DOCUMENT } from '@angular/common'; 

@Component({...})
export class AppCmp {
   constructor(@Inject(DOCUMENT) document) {
      document.getElementById('el');
   }
}

या यदि आप जिस तत्व को प्राप्त करना चाहते हैं, वह उस घटक में है, तो आप टेम्पलेट संदर्भों का उपयोग कर सकते हैं ।

— सुरेन सरपयन
स्रोत

मुझे दस्तावेज़ ऑब्जेक्ट को क्यों इंजेक्ट करना चाहिए और जावास्क्रिप्ट द्वारा प्रदान किए गए सीधे उपयोग नहीं करना चाहिए?

— डेविड

@ डेविड हम कोणीय की प्रणाली पर भरोसा करते हैं। बाद में वे बहुत अच्छी चीजों को लागू कर सकते हैं और उनके कार्यान्वयन में कुछ जाँच कर सकते हैं। इसलिए हम सिर्फ यहाँ अमूर्त पर भरोसा करते हैं

— सुरेन सप्रियन

24

कोणीय 8 या पीछे के दृश्य के लिए @ दृश्य में एक अतिरिक्त पैरामीटर होता है जिसे ओप्स कहा जाता है, जिसमें दो गुण होते हैं: रीड एंड स्टैटिक, रीड वैकल्पिक है। आप इसे इस तरह से उपयोग कर सकते हैं:

// ...
@ViewChild('mydiv', { static: false }) public mydiv: ElementRef;

constructor() {
// ...

<div #mydiv></div>

नोट: स्टेटिक: झूठे को अब कोणीय 9. में आवश्यकता नहीं है (बस { static: true }जब आप उस वेरिएबल को ngOnInit के अंदर उपयोग करने जा रहे हों)

— गुस्तावो संतमारिया
स्रोत

1

यह तब काम करता है जब आप गतिशील रूप से तत्वों को छिपाते या दिखाते हैं *ngIf। आप तत्व कैसे बना रहे हैं?

— गुस्तावो सैंटमारिया

8

इसे इस्तेमाल करे:

टाइपस्क्रिप्ट फ़ाइल कोड:

(<HTMLInputElement> document.getElementById ( "नाम"))। मूल्य

HTML कोड:

 <input id = "name" type = "text" #name />

— स्वाति
स्रोत

7

  element: HTMLElement;

  constructor() {}

  fakeClick(){
    this.element = document.getElementById('ButtonX') as HTMLElement;
    this.element.click();
  }

— सीजर देवेसा
स्रोत

4

यह बहुत असुरक्षित है (कोणीय यूनिवर्सल में इस कमांड को चलाने से दुर्घटना होती है) और इसका उपयोग केवल तभी किया जाना चाहिए जब कोई अन्य विकल्प संभव न हो (यह भी विचार करें कि तत्व मौजूद नहीं हो सकता है)

— जोनिरास

3

M @ जोनिरास यह बहुत असुरक्षित क्यों है?

— सुमी स्ट्रैसल