webentwicklung-frage-antwort-db.com.de

wie führe ich Onload-Ereignisse für Elemente innerhalb der Komponente html in angle2 aus

Das ist also eine 2 in 1-Frage.

Zuerst versuche ich, eine Funktion auszulösen, wenn ein Element innerhalb einer Komponenten-HTML geladen wird. Ich habe es auf verschiedene Weise ausprobiert, wie: <div [onload]="myFunction()"> dies führt jedoch dazu, dass die Funktion mehrmals aufgerufen wird, 10 um genau zu sein. Meine Vermutung ist, dass dies nicht der richtige Weg ist, aber ich bin nicht vertraut genug, damit es richtig funktioniert. Auch ich möchte das Element als Parameter mitschicken. Zum Beispiel funktioniert <div #myDiv (click)="myFunction(myDiv)">, aber offensichtlich wird dies nicht beim Laden des Elements ausgelöst. Was ist der richtige Weg hier, oder bin ich verpflichtet, einen QuerySelector zu machen ...

Die nächste Frage ist die Injektion des ElementRef in die Komponente. Nun, die Dokumente sagen Sie mir, dass die Verwendung der 'nativeElement'-Eigenschaft nicht der richtige Weg ist. Ich verstehe nicht warum. Einen Bezug auf das Element in Ihrer Komponente zu haben, ist eine gute Sache, nicht wahr? Oder beaufsichtige ich eine Trennung der Besorgnis? Ich frage, weil ich, wenn meine erste Frage keine Option ist, diese Elementreferenz verwenden möchte, um eine querySelection meiner gewünschten Onload-Auslöseelemente in der Funktion ngOnInit der OnInit-Klasse durchzuführen.

Alle Informationen sind willkommen, da die Dokumente von angle2 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>

7
Ken

Um Events zu laden, checke diesen Artikel ab Anfängerfehler # 2.

Bei allgemeinen Ereignissen fand ich, dass EventEmitter nützlich ist, um untergeordnete Komponenten (benutzerdefinierte Markup-Tags) der übergeordneten Komponente die Ereignisse des Kindes mitzuteilen. Erstellen Sie im untergeordneten Element ein benutzerdefiniertes Ereignis (eine Klassenvariable, die mit @Output() dekoriert ist), das bei jeder Ermittlung .emit() verwendet wird und Parameter des angegebenen <data type> des EventEmitter enthalten kann. Dann kann das übergeordnete Element das benutzerdefinierte Ereignis behandeln und auf die Parameter zugreifen, die Sie in $event gebündelt haben. Ich verwende die Angular 2-Schnellstartdateien.

Child Skript:

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
  }

}

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

9
BeatriceThalo

Sie können eine Instanz Ihrer div mit Query abrufen und dann in der ngOnInit die registerDropdown-Methode auslösen und die nativeElement aus dem QueryList<ElementRef> übergeben

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

Bei weiterem Lesen scheint die Implementierung eines Spions der beste Weg, um dies zu erreichen:

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

0
Paul Nelligan