web-dev-qa-db-fra.com

comment puis-je déclencher des événements onload pour des éléments au sein du composant html dans angular2

Donc, ceci est une question 2 en 1.

Premièrement, j'essaie d'activer une fonction lorsqu'un élément, au sein d'un composant HTML, se charge. Je l'ai essayé de nombreuses façons, comme: <div [onload]="myFunction()">, mais la fonction est appelée plusieurs fois, 10 pour être exact. J'imagine que ce n'est pas la solution, mais je ne suis pas assez familier pour que cela fonctionne correctement. De plus, j'aimerais envoyer l'élément en tant que paramètre. Par exemple, exécuter <div #myDiv (click)="myFunction(myDiv)"> fonctionne, mais il est évident que cela n'est pas déclenché lors de la charge dudit élément. Quelle est la bonne manière ici, ou suis-je obligé de faire un querySelector ...

Vient ensuite une question impliquant l’injection de ElementRef dans le composant. Maintenant, les docs me disent que l’utilisation de la propriété 'nativeElement' n’est pas tout à fait la solution. Je ne comprends pas vraiment pourquoi. Avoir une référence à l'élément dans votre composant est une bonne chose, n'est-ce pas? Ou suis-je en train de superviser une séparation des préoccupations? Je pose la question car si ma première question n’est pas une option, j’aimerais utiliser cette référence d’élément pour effectuer une requête querySelection de mes éléments de déclenchement en charge désirés dans la fonction ngOnInit de la classe OnInit.

Toutes les informations sont les bienvenues, voir les documents angular2 ne sont pas tout à fait complets. Je vous remercie.

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>

typescriptangularangular2-template
7
Ken

Pour les événements de chargement, consultez cet article à partir de la recrue Mistake # 2.

Pour les événements généraux, j'ai trouvé EventEmitter très utile pour permettre aux composants enfants (balises de balisage personnalisées) d'informer le composant parent des événements de l'enfant. Dans l'enfant, créez un événement personnalisé (une variable de classe décorée avec @Output()) qui .emit() chaque fois que vous déterminez et peut inclure des paramètres du <data type> spécifié de votre EventEmitter. Ensuite, le parent peut gérer l'événement personnalisé et accéder aux paramètres que vous avez regroupés dans $event. J'utilise les fichiers de démarrage rapide Angular 2.

Child 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 Balisage:

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

}

Note: vous pouvez aussi essayer EventEmitter<MyChildComponent> avec .emit(this) 

9
BeatriceThalo

Vous pouvez récupérer une instance de votre div en utilisant Query, puis, dans le ngOnInit, déclencher la méthode registerDropdown et transmettre la nativeElement à partir du 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);
  }
}
0
SnareChops

En lisant davantage, il semble que la mise en œuvre d’un espion est le meilleur moyen d’y parvenir:

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

0
Paul Nelligan