come attivare gli eventi onload per gli elementi all'interno del componente html in angular2

Question

Quindi questa è una domanda 2 in 1.

In primo luogo, sto provando a generare una funzione quando un elemento, all'interno di componenti html, viene caricato. L'ho provato in molti modi, come ad esempio: <div [onload]="myFunction()">, ma ciò comporta che la funzione venga chiamata più volte, 10 per la precisione. La mia ipotesi è che questa non è la strada da percorrere, ma non ho abbastanza familiarità per farlo funzionare correttamente. Vorrei anche inviare l'elemento come parametro. Ad esempio fare <div #myDiv (click)="myFunction(myDiv)"> funziona, ma ovviamente questo non è licenziato su carico di detto elemento. Che cosa è il modo corretto qui, o sono obbligato a fare una querySelector ...

Avanti è una domanda che coinvolge l'iniezione del ElementRef all'interno del componente. Ora, the docs dimmi che usare la proprietà 'nativeElement' non è esattamente la strada da percorrere. Non capisco davvero perché. Avere un riferimento all'elemento nel componente è una buona cosa, non è vero? O sto supervisionando una separazione tra le preoccupazioni? Ti sto chiedendo perché se la mia prima domanda non è un'opzione, mi piacerebbe usare questo riferimento di elemento per fare una querySelection dei miei elementi di attivazione onload desiderati nella funzione ngOnInit della classe OnInit.

Tutte le informazioni sono benvenute, visto che i documenti angular2 non sono del tutto completi. Grazie.

export class HomeComponent implements OnInit 
 
{ 
 
    public categories: Category[]; 
 
    public items: Item[]; 
 

 
    constructor 
 
    (
 
     public element: ElementRef, 
 
     private _categoryService: CategoryService, 
 
     private _itemService: ItemService, 
 
     private _router: Router 
 
    ){} 
 

 
    public registerDropdown(element:HTMLElement): void 
 
    { 
 
     console.log(element); 
 
    } 
 

 
    private getCategories(): void 
 
    { 
 
     this._categoryService.getAll().then((categories:Category[])=> this.categories = categories); 
 
    } 
 

 
    private getItems(): void 
 
    { 
 
     this._itemService.getAll().then((items:Item[])=> this.items = items); 
 
    } 
 

 
    public ngOnInit(): any 
 
    { 
 
     this.getCategories(); 
 
     this.getItems(); 
 
    } 
 
}

<div id="home"> 
 

 
    <div id="search"> 
 
     <div class="container"> 
 

 
      <!-- div in question, the [ngModel] is a shot in the dark --> 
 
      <div #myDiv class="dropdown category" [ngModel]="registerDropdown(myDiv)"> 
 
       <span class="placeholder">Selecteer categorieën</span> 
 
       <div class="the-drop"> 
 
        <ul class="ul"> 
 
         <li *ngFor="#category of categories"> 
 
          <input type="checkbox" />{{category.long}} 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 
    
 
</div>

Answer 1

È possibile prendere un'istanza della div utilizzando Query e poi nel ngOnInit grilletto il metodo registerDropdown e passare il nativeElement dal QueryList<ElementRef>

export class HomeComponent implements OnInit{ 
    public categories: Category[]; 
    public items: Item[]; 

    constructor 
    (
    public element: ElementRef, 
    private _categoryService: CategoryService, 
    private _itemService: ItemService, 
    private _router: Router, 
    @Query('myDiv') private elList: QueryList<ElementRef> 
){} 

    public registerDropdown(element:HTMLElement): void 
    { 
    console.log(element); 
    } 

    ... 

    public ngOnInit(): any 
    { 
    this.getCategories(); 
    this.getItems(); 
    this.registerDropdown(elList.first.nativeElement); 
    } 
} 

Answer 2

On ulteriore lettura , sembra che implementare una spia sia il modo migliore per ottenere questo:

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#spy

Answer 3

Per gli eventi di carico, controllare this article a partire da rookie Errore # 2.

Per gli eventi generali, ho trovato EventEmitter utile come un modo per i componenti figlio (tag di markup personalizzati) per comunicare al componente principale gli eventi del figlio. Nel bambino, creare un evento personalizzato (una variabile di classe decorata con @Output()) che sarà .emit() ogni volta che si determina e può includere i parametri del tuo EventEmitter specificato <data type>. Quindi il genitore può gestire l'evento personalizzato e accedere ai parametri che sono stati raggruppati entro $event. Sto usando i file quickstart di Angular 2.

Bambino Script:

import {Component, Output, EventEmitter} from '@angular/core'; 
@Component({ 
    selector: 'my-child', 
    templateUrl: 'app/my-child.component.html' 
}) 
export class MyChildComponent { 
    @Output() childReadyEvent: EventEmitter<string> = new EventEmitter(); 

    ngOnInit(){ 
    //do any lines of code to init the child 
    console.log("this executes second"); 
    //then finally, 
    this.childReadyEvent.emit("string from child");   
    } 
} 

Parent Markup:

<h3>I'm the parent</h3> 
<my-child (childReadyEvent)="parentHandlingFcn($event)"></my-child> 

Parent Script:

import {Component} from '@angular/core'; 
import {MyChildComponent} from './my-child.component'; 

@Component({ 
    selector: 'my-parent', 
    templateUrl: 'app/my-parent.component.html', 
    directives: [MyChildComponent] 
}) 
export class MyParentComponent { 

    ngOnInit(){ 
    console.log("this executes first"); 
    } 

    parentHandlingFcn(receivedParam: string) { 
    console.log("this executes third, with " + receivedParam); //string from child 
    } 

} 

Nota: si potrebbe anche provare EventEmitter<MyChildComponent> con .emit(this)