mehrere Artikel aus this.router.events.subscribe Erste()

Question

ich zur Zeit auf Router Ereignisse melde mich an den Titel meiner Seite zu ändern, wenn Routen zu ändern, wie so

this.routerSub$ = this.router.events 
    .filter(event => event instanceof NavigationEnd) 
    .map(() => this.activatedRoute) 
    .map(route => { 
     while (route.firstChild) route = route.firstChild; 
     return route; 
    }) 
    .filter(route => route.outlet === 'primary') 
    .mergeMap(route => route.data) 
    .subscribe((event) => { 
     title = event['title'] 
      ? `${event['title']}` 
      : 'Default Title' 
     this.title.setTitle(title); 
    }); 

Mein Problem ist, dass bei bestimmten Szenarien, ich möchte den Titel auf einen Wert in URL (Teil einer Route) festlegen. Wie mache ich das hier? Ich weiß, dass ich die URL sowie Ereignisse nicht abonnieren kann, aber ich habe eine harte Zeit herauszufinden, was ich innen zuordnen kann.

Hier ist, was ich bin versucht

this.router.events 
     .filter(event => event instanceof NavigationEnd) 
     .map(() => { 
      return this.activatedRoute 
     }) 
     .switchMap(route => { 
     return route.data.combineLatest(route.url, (data, url) => { 
      return data['title'] ? `Title: ${data['title']}` : url.join(''); 
     }); 
    }) 

Auf der .switchMap Linie versagt, Route vom Typ ActivatedRoute ist, ist route.data vom Typ Object und der Fehler ich auf dem combineLatest () Linie ist

route.data.combineLatest ist keine Funktion

Answer 1

Wenn wir beiseite Winkel rou verlassen Bei den Details wollen Sie grundsätzlich Werte aus zwei verschiedenen Streams kombinieren. Es gibt mindestens ein paar Wege, wie man das macht.

Fall 1. Sie möchten den Titel immer dann aktualisieren, wenn einer der Streams ausstrahlt, und die neuesten Werte aus beiden Streams verwenden.

Verwendung combineLatest:

const getTitle$ = (activatedRoute) => { 
 
    return activatedRoute.url 
 
     .combineLatest(activatedRoute.data, (url, data) => { 
 
      return url + data; 
 
     }); 
 
}; 
 

 
const url = Rx.Observable.interval(400).take(3).map(x => `url_${x} `); 
 
const data = Rx.Observable.interval(200).take(6).map(x => `data_${x}`); 
 

 
getTitle$({ url, data }).subscribe(title => console.log(title));

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

Fall 2. Sie möchten den Titel nur aktualisieren, wenn der url-Stream sendet, aber auch den neuesten Wert aus dem data-Stream abrufen.

Verwendung withLatestFrom:

const getTitle$ = (activatedRoute) => { 
 
    return activatedRoute.url 
 
     .withLatestFrom(activatedRoute.data, (url, data) => { 
 
      return url + data; 
 
     }); 
 
} 
 

 
const url = Rx.Observable.interval(400).take(3).map(x => `url_${x} `); 
 
const data = Rx.Observable.interval(200).take(6).map(x => `data_${x}`); 
 

 
getTitle$({ url, data }).subscribe(title => console.log(title));

<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>

Wenn Sie begegnen, dass Ihr beobachtbaren keine dieser Operatoren enthält, versuchen, sie explizit zu importieren:

import 'rxjs/add/operator/combineLatest'; 
import 'rxjs/add/operator/withLatestFrom'; 

Update:

Um es präziser zu machen, hier ist ein Codebeispiel, das näher an der ursprünglichen Beispiel ist:

this.router.events 
    .filter(event => event instanceof NavigationEnd) 
    ... // <- route mapping and filtering skipped for brevity 
    .switchMap(route => { 
     return route.data.combineLatest(route.url, (data, url) => { 
      // make the title out of data and url 
      return data['title'] ? `Title: ${data['title']}` : url.join(''); 
     }); 
    }) 
    .subscribe(title => this.title.setTitle(title));