Jak mogę odpalać zdarzenia ładowania dla elementów w html komponentu w angular2

Question

To jest pytanie 2 w 1.

Po pierwsze, próbuję uruchomić funkcję, gdy element w html składników ładuje się. Próbowałem na wiele sposobów, takich jak: <div [onload]="myFunction()"> to jednak powoduje, że funkcja jest wywoływana wiele razy, 10 to dokładna. Domyślam się, że to nie jest droga, ale nie jestem dostatecznie zaznajomiony, aby działała prawidłowo. Również chciałbym wysłać element jako parametr. Na przykład wykonanie <div #myDiv (click)="myFunction(myDiv)"> działa, ale oczywiście nie jest uruchamiane z obciążeniem tego elementu. Co jest właściwym sposobem tutaj, lub jestem zobowiązany do zrobienia querySelector ...

Następnym pytaniem jest wstrzyknięcie elementu Element w komponent. Teraz, the docs, powiedz mi, że używanie właściwości nativeElement nie jest do końca dobrym pomysłem. Naprawdę nie rozumiem dlaczego. Posiadanie odniesienia do elementu w twoim komponencie to dobra rzecz, nieprawdaż? Czy mogę nadzorować separację rzeczy obawy? Pytam, ponieważ jeśli moje pierwsze pytanie nie jest opcją, chciałbym użyć tego odnośnika do elementu, aby wykonać querySelection moich pożądanych elementów uruchamiania onload w funkcji ngOnInit klasy OnInit.

Wszystkie informacje są mile widziane, ponieważ dokumentacja angular2 nie jest kompletna. Dziękuję Ci.

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

Można chwycić instancję swojej div użyciu Query a następnie w ngOnInit spuście metodę registerDropdown i przechodzą w nativeElement z 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

Z dalszej lektury wydaje się, że najlepszym sposobem na osiągnięcie tego jest wdrożenie Szpiega:

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

Answer 3

przypadku zdarzeń ładowania, sprawdź this article zaczynając debiutanckim Błąd # 2.

Dla ogólnych wydarzeń, znalazłem EventEmitter, aby było przydatne jako sposób dla komponentów potomnych (niestandardowe znaczniki), aby poinformować komponent macierzysty o zdarzeniach dziecka. U dzieci, utwórz niestandardowe zdarzenie (zmienną klasy ozdobioną przy użyciu @Output()), które będzie .emit(), kiedy tylko to określisz, i może zawierać parametry określone przez Twój EventEmitter na <data type>. Następnie rodzic może obsłużyć zdarzenie niestandardowe i uzyskać dostęp do parametrów, które są w pakiecie w ramach $event. Używam plików szybkiego startu Angular 2.

Dziecko Scenariusz:

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

nadrzędna Markup:

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

nadrzędna Scenariusz:

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 
    } 

} 

Uwaga: możesz również wypróbować EventEmitter<MyChildComponent> z .emit(this)