web-dev-qa-db-de.com

Wie man auf derselben Route in .navigiert Angular 4 und fangen Sie das gleiche Ereignis?

Okay, ich habe hier zwei Anwendungsfälle für meine Frage:

  1. Ich arbeite an einer Anwendung, die eine /en/register-Route hat. Es funktioniert alles gut, wenn ich mich an der Wurzel befinde und auf eine Schaltfläche klicke, die this.router.navigate([this.routeParams.lang, 'register']); ausführt, und es ist alles gut. Dies öffnet ein Modal im Konstruktor (oder ngOnInit, sowieso) mit ($('#modalRegister') as any).modal('show');.

    Es funktioniert alles gut, aber wenn ich den Modal schließe, ist die Route immer noch /en/register/ (yeah, ich kann es zu /en machen, aber siehe Anwendungsfall # 2, bevor Sie dies vorschlagen) irgendetwas tun Weder der Konstruktor noch ngOnInit werden aufgerufen, noch nicht einmal route.params.subscribe () oder route.url.subscribe () (was meiner Meinung nach sollte ...).

  2. In derselben Anwendung habe ich eine Schaltfläche, die eine Suche durchführt und einige Markierungen in einer Karte zentriert (in /en/search/blah). Das ist alles gut, wenn ich in der Indexseite bin oder, wenn ich die Suchabfrage ändere. Wenn der Benutzer die Karte jedoch an eine andere Stelle zieht und die gleichen Markierungen erneut zentriert haben möchte, mache ich auch this.router.navigate(['search', this.searchQuery]); und wenn es sich dabei um dieselbe Route handelt (klicken Sie zum Beispiel zweimal auf die Suchschaltfläche), wird nichts ausgeführt.

Ich stimme zu, dass es gut ist, damit die Komponenten nicht neu erstellt werden, wenn sich die URL nicht geändert hat. Dies ist ein schlechtes Design, da Sie in UI-Routern dasselbe tun könnten und funktionieren würden (soweit ich mich erinnere). .

Wie führe ich in Angular 4 den gleichen Code im Konstruktor/ngOnInit der Komponente der Route aus, wenn dieselbe URL aufgerufen wird, zu der navigiert werden soll? oder wie erkenne ich, ob die URL gleich ist und verhalten Sie sich entsprechend? (obwohl ich immer noch denke, es ist schlechtes Design, aber trotzdem ...).

Jeder Rat wird sehr geschätzt. Vielen Dank!

6
Alemar

Als ich den Konstruktor und die ngOnInit-Funktionen der aktuellen Komponente "neu laden" musste, war die einzige Lösung, die ich fand, eine Art Problemumgehung: 

Ich habe die Tatsache ausgenutzt, dass "this.router.navigate" ein Versprechen zurückgibt. Also navigierte ich woanders und kehrte zurück. Es ist ein bisschen hässlich, aber es funktioniert und die Benutzeroberfläche ist nicht betroffen:

this.router.navigate(..[somewhere else]..)
    .then(()=>{this.router.navigate(..back..)})

Ich hoffe es hilft.

7
rotemx

Für den Fall 1

Warum navigieren Sie zu einer neuen Route, um nur einen Modal zu öffnen. Machen Sie es einfach auf derselben Route mit einem Funktionsaufruf. Wenn Sie zu einer neuen Route wechseln möchten, können Sie im modalen Abschlussereignis erneut this.router.navigate("/") aufrufen. 

Für den Fall 2... Hoffe, dass dies funktioniert.

currentSearchQuery: string;

ngOnInit() {
  this.route.paramMap
    .switchMap((params: ParamMap) => {
        this.currentSearchQuery = params.get('searchQuery');
        updateMarkers();
      });

}
3
Dulaj Atapattu

Fügen Sie einfach einen Dummy-Parameter am Ende der Route/de/register/jk2h4-42hj-234n2-234dfg oder den Abfrageparameter like/en/register? Val = jk2h4-42hj-234n2-234dfg hinzu

Ändern Sie den Parameterwert, wenn Sie dieselbe Route aufrufen. Der Browser weiß also, dass die URL-Änderung und die Angualr-Komponente ab dem gesamten Lebenszyklus funktionieren.

0
kamprasad

ich verwende diese Problemumgehung 

this.router.navigate(['path']).then(()=>  {window.location.reload();});
0
FlyingTurtle