Wie feuere ich Onload-Ereignisse für Elemente innerhalb der Komponente html in angular2

Question

Also das ist eine 2 in 1 Frage.

Zuerst versuche ich eine Funktion zu feuern, wenn ein Element innerhalb einer Komponente html geladen wird. Ich habe es auf verschiedene Arten versucht, wie zum Beispiel: <div [onload]="myFunction()"> Dies führt jedoch dazu, dass die Funktion mehrmals aufgerufen wird, um genau zu sein. Meine Vermutung ist, dass dies nicht der richtige Weg ist, aber ich bin nicht vertraut genug, um es richtig funktionieren zu lassen. Auch möchte ich das Element als Parameter mitschicken. Zum Beispiel funktioniert <div #myDiv (click)="myFunction(myDiv)"> funktioniert, aber offensichtlich ist dies onload dieses Elements nicht ausgelöst. Was ist der richtige Weg hier, oder bin ich verpflichtet, eine Abfrage zu tun? Selector ...

Als nächstes ist eine Frage, die die Injektion der ElementRef innerhalb der Komponente. Jetzt, the docs sagen Sie mir, dass die 'nativeElement'-Eigenschaft ist nicht ganz der Weg zu gehen. Ich verstehe nicht wirklich warum. Ein Verweis auf das Element in Ihrer Komponente ist eine gute Sache, nicht wahr? Oder beaufsichtige ich eine Trennung der Besorgnis Sache? Ich frage, denn wenn meine erste Frage keine Option ist, möchte ich diese Elementverweis verwenden, um eine AbfrageSelection meiner gewünschten Onload-Brennelemente in der ngOnInit-Funktion der OnInit-Klasse zu tun.

Alle Informationen sind willkommen, da die eckigen Dokumente nicht vollständig sind. Vielen Dank.

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

Sie eine Instanz Ihrer divQuery mit packen und dann in der ngOnInit Trigger die registerDropdown Methode und übergeben im nativeElement vom 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

auf weiterführende Literatur scheint es, dass die Implementierung eines Spy der beste Weg ist, dies zu erreichen:

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

Answer 3

Zum Laden Ereignisse Besuche this article bei Rookie Fehler # 2 beginnen.

Für allgemeine Ereignisse, fand ich EventEmitter als eine Möglichkeit für untergeordnete Komponenten (benutzerdefinierte Markup-Tags) nützlich, um die übergeordnete Komponente über die Ereignisse des Kindes zu informieren. Erstellen Sie im untergeordneten Objekt ein benutzerdefiniertes Ereignis (eine mit @Output() dekorierte Klassenvariable), die bei jeder Ermittlung .emit() ist, und kann Parameter des von Ihnen angegebenen EreignisEmitters <data type> enthalten. Dann kann das übergeordnete Element das benutzerdefinierte Ereignis verarbeiten und auf die Parameter zugreifen, die Sie innerhalb von $event gebündelt haben. Ich verwende die Angular 2 Quickstart-Dateien.

Kinder 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");   
    } 
} 

Eltern Markup:

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

Eltern 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 
    } 

} 

Hinweis: Sie könnten auch versuchen EventEmitter<MyChildComponent> mit .emit(this)