kątowa zdarzenie 2 ogień po ngFor

Próbuję użyć jQuery plugin, który zastępuje domyślny pasek przewijania wewnątrz niektórych elementów dynamicznych w Kątowymi 2.kątowa zdarzenie 2 ogień po ngFor

Elementy te są tworzone przy użyciu pętli ngFor, to nie mogę dołączyć Zdarzenia jQuery do elementów, które zostały utworzone.

Aplikacja, w pewnym momencie, mutuje obiekt Observable, który jest zawarty wewnątrz ngFor w celu renderowania widoku.

Teraz chciałbym wiedzieć, kiedy Angular zakończy rysowanie moich elementów, aby móc uruchomić plugin jQuery.

Nie chcę dołączać żadnego javascript do szablonu HTML.
Nie chcę używać ngAfterViewInit, ponieważ haki wypala się zbyt wiele razy
Nie chcę wdrożyć rozwiązanie oparte na setTimeout (myślę, że to nie jest wiarygodne)

I znalazł rozwiązanie przy użyciu poniższego zwyczaj Pipe: na koniec cyklu w szablonie ngFor, piszę:

{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}

Gdzie FireStoreEventPipe jest coś takiego:

transform(obj: any, args:any[]) { 
    var event = args[0]; 
    //Fire event 
    return null; 
}

Ale to rozwiązanie mnie nie zadowala.

Wszelkie sugestie na lepszy sposób?

Dzięki

Źródło

2016-04-07 Andrea Ialenti

Jeśli nie myśl, że to duplikat dodaj komentarz, aby go ponownie otworzyć. –

Myślę, że to nie duplikat, ponieważ nie mogę użyć 'ngAfterViewInit' (próbowałem, ale nie jest to dla mnie ok, ponieważ jest uruchamiany zbyt wiele razy), i szukałem czegoś lepszego niż rozwiązanie oparte na setTimeout (które są nie wiarygodny). Będę edytować moje pytanie z tymi szczegółami –

'ngAfterViewInit()' jest wywoływane tylko raz AFAIK Myślę, że nie jest wystarczająco często. Nie sądzę, że dostaniesz inny wynik, ponieważ Angular nie zapewnia niczego, do czego można zadzwonić po tym, jak 'ngFor' zaktualizuje DOM. Chciałbym sprawdzić, czy jest to problem w repozytorium GitHub, w przeciwnym razie należy go utworzyć. –

Miałem podobny problem. Używam angular2 rc 1.

Rozwiązałem go, tworząc nowy komponent (dyrektywa nie działała dla mnie).

import { Component, Input, Output, EventEmitter } from '@angular/core'; 
@Component({ 
    selector: 'islast', 
    template: '<span></span>' 
}) 
export class LastDirective { 
    @Input() isLast: boolean; 
    @Output() onLastDone: EventEmitter<boolean> = new EventEmitter<boolean>(); 
    ngOnInit() { 
     if (this.isLast) 
     this.onLastDone.emit(true); 
    } 
}

potem importowane w moim poszukiwanego składnika jako składnik dziecko w dyrektywach:

directives: [LastDirective],

w HTML:

<tr *ngFor="let sm of filteredMembers; let last = last; let i=index;" data-id="{{sm.Id}}"> 
    <td> 
     <islast [isLast]="last" (onLastDone)="modalMembersDone()"></islast> 
    </td> 
</tr>

I oczywiście realizować modalMembersDone()

Źródło

2016-05-19 07:58:34

Odpowiedz

Powiązane problemy