Angular2 Nasıl dinamik

Question

Ben dinamik olarak oluşturulmuş bu girişlere sahip oluşturulan HTML elemanlarının referans almak için:

<div *ngFor="let cell of column; let i = index;"> 
      <!-- Material design input--> 
      <md-input id="my-input-{{i}}"> 
      </md-input> 
    </div> 

id=my-input-{{i}} Ben bu dinamik kimliği temel DOM öğesine bir referans almak istiyorum lütfen unutmayın. Bu giriş 3, 6 veya daha fazla giriş olabilir, bu yüzden kimliğe dinamik olarak erişmem ve ona bir göz atmam gerekiyor.

Answer 1

tek yanıttır

let elem:Element = document.getElementById("myProgrammaticallyChosenIndex")

tamamlamaya çalıştığınız Ne

açısal 4+

Answer 2

DOM'a elementRef tarafından erişebilirsiniz.

Bu sizin izin doğrudan erişim sağlar ElementRef class

adında bir sınıf vardır o

constructor(myElement: ElementRef) { ... } 

Ve nativeElement özelliği

elementRef.nativeElement.select("#blabla") 

Answer 3

tarafından DOM öğesine erişmek ederek yapıcı atmak enjekte mevcut bileşen veya DOM barındırma yönergesi.

Sen ElementRef ve Renderer ile Açısal 2.

Örnek tarafından sağlanan jQuery veya Renderer sınıfını kullanarak değişiklik yapmak için o zaman html öğesi özelliklerine erişebilir, bir HTML öğesi almak için ElementRef.nativeElement kullanabilirsiniz:

@angular/core den

import { Directive, ElementRef, Input, Renderer } from '@angular/core'; 
@Directive({ selector: '[myHighlight]' }) 
export class HighlightDirective { 
    constructor(el: ElementRef, renderer: Renderer) { 
     renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); 
    } 
} 

Answer 4

Kullanım ElementRef sınıf ebeveyn elemanı almak ve daha sonra dinamik elemanlar b almak için HTMLElement oluşturmak için y sınıfı adı.

Bileşen:

declare var $: any; //intentional use of jQuery-not recommended though 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input type='button' (click)='addDiv()' value='Add New Div' /> 

    <input type='button' (click)='selectDiv()' value='Select' /> 
    ` 
}) 
export class App { 
    constructor(private elRef: ElementRef) { 
    } 

    addDiv() { 
    /*intentional use of jQuery for appending new div 
    give a class to your dynamic elements*/ 

    $('my-app').append("<div class='foo'>Hello I'm Dynamic!</div>"); 
    } 

    selectDiv() { 
    //create a new HTMLElement from nativeElement 
    var hElement: HTMLElement = this.elRef.nativeElement; 

    //now you can simply get your elements with their class name 
    var allDivs = hElement.getElementsByClassName('foo'); 

    //do something with selected elements 
    console.log(allDivs); 
    } 
} 

Working Plunker

Düzenleme: Ben amaç burada hızlı demo için jQuery kullanılmalıdır. Aksi halde, Angular ile jQuery kullanmamalısınız.