Angular 2 - Aufruf Funktion aus DOM-Element-Direktive

Question

Ich habe einige dynamisch erstellte Elemente mit einer Direktive. Ich muss in einigen Fällen eine Funktion von der Direktive des Elements aufrufen.

<div #myelement myDirective>...</div> 

im HTML: Wenn ich diese Elemente statisch angelegt wurde, würde ich @ViewChild('myElement') myElement in der Komponente und so etwas wie verwenden. Allerdings konnte ich das nicht, weil ich diese Elemente dynamisch erstelle (ich kenne keine solche Methode, um #myelement1, #myelement2, ... Tags dynamisch zu vergeben). Meine Idee war, die Elemente mit document.getElementById() zu bekommen, aber ich konnte nicht von nativen DOM-Element auf die Direktive zugreifen.

Haben Sie eine Idee, wie Sie auf die Direktiven dieser Elemente zugreifen können, ohne @VievChild() zu verwenden?

Answer 1

können Sie etwas tun:

html:

<div mask="mask1"></div> 
<div mask="mask2"></div> 

ts:

import { Directive, Input} from '@angular/core'; 

@Directive({ 
    selector: '[mask]' 
}) 
export class Mask { 
    @Input() mask: string; 

    ngOnInit(){ 
    console.log(this.mask); 
    } 

    getMask(){ 
    return this.mask; 
    } 
} 

import { Component, ViewChildren,QueryList } from '@angular/core'; 
//... 
export class AppComponent { 
    public user; 

    @ViewChildren(Mask) masks: QueryList<Mask>; 
    constructor(){} 

ngAfterViewInit(){ 

    this.masks.forEach((mask)=>{ 
     console.log(mask.getMask()); 
    }) 
    // not sure of this 
    this.masks.changes.subscribe((mask)=>{ 
     console.log(mask.getMask()); 
    }) 
} 

}