Angular 2 Brandereignis nach ngFor

Ich versuche, ein jQuery-Plugin zu verwenden, die die Standard-Scrollbar innerhalb einiger dynamische Elemente in Angular 2.Angular 2 Brandereignis nach ngFor

Diese Elemente werden erstellt unter Verwendung eines ngFor Schleife ersetzt, ist, dass ich das nicht anhängen jQuery-Ereignisse zu den Elementen, die erstellt werden.

Die Anwendung mutiert zu einem bestimmten Zeitpunkt ein Observable Objekt, das innerhalb der ngFor ist, um die Ansicht zu rendern.

Nun würde ich gerne wissen, wenn Angular endet, um meine Elemente zu zeichnen, damit ich das jQuery-Plugin ausführen kann.

Ich möchte kein Javascript in die HTML-Vorlage einfügen.
Ich will nicht die ngAfterViewInit verwenden, da diese zu viele Male gebrannt Haken
Ich möchte nicht über eine setTimeout-basierte Lösung implementieren (ich glaube es nicht zuverlässig ist)

I eine Lösung unter Verwendung der folgenden benutzerdefinierten Pipe gefunden: am Ende des ngFor Zyklus in der Vorlage, schreibe ich:

{{i | FireStoreEventPipe:'EVENT_TO_BE_FIRED'}}

Wo FireStoreEventPipe ist so etwas wie:

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

Aber diese Lösung befriedigt mich nicht.

Irgendwelche Vorschläge für einen besseren Weg?

Dank

Quelle

2016-04-07 Andrea Ialenti

Wenn Sie glaube nicht, dass dies ein Duplikat ist, füge einen Kommentar hinzu, um es wieder zu öffnen. –

Ich denke, es ist kein Duplikat, weil ich 'ngAfterViewInit' nicht verwenden kann (Ich habe versucht, aber es ist nicht in Ordnung für mich, weil es zu oft gefeuert wird), und ich suchte nach etwas besser als SetTimeout-basierte Lösung nicht zuverlässig). Ich werde meine Frage mit diesen Details bearbeiten –

'ngAfterViewInit()' wird nur einmal aufgerufen AFAIK Ich denke, es ist nicht oft genug. Ich glaube nicht, dass Sie ein anderes Ergebnis erhalten, weil Angular nichts anbietet, nachdem 'ngFor' das DOM aktualisiert hat. Ich würde prüfen, ob das im GitHub Repo ein Problem dafür ist, andernfalls erstelle ich einen. –

hatte ich ein ähnliches Problem. Ich benutze angular2 rc 1.

Ich löste es, indem Sie eine neue Komponente erstellen (eine Richtlinie funktionierte nicht für mich).

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

Dann importierte ich in meiner gewünschten Komponente als untergeordnete Komponente in den Richtlinien:

directives: [LastDirective],

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

Und natürlich implementieren modalMembersDone()

Quelle

2016-05-19 07:58:34

Angular 2 Brandereignis nach ngFor

Antwort

Verwandte Themen