diff --git a/src/app/components/languagetoggle/languagetoggle.component.html b/src/app/components/languagetoggle/languagetoggle.component.html index 90a8339..15d6724 100644 --- a/src/app/components/languagetoggle/languagetoggle.component.html +++ b/src/app/components/languagetoggle/languagetoggle.component.html @@ -1 +1 @@ - + diff --git a/src/app/components/languagetoggle/languagetoggle.component.ts b/src/app/components/languagetoggle/languagetoggle.component.ts index 1e70e33..84d6935 100644 --- a/src/app/components/languagetoggle/languagetoggle.component.ts +++ b/src/app/components/languagetoggle/languagetoggle.component.ts @@ -25,12 +25,14 @@ export class LanguagetoggleComponent implements OnInit { } ngOnInit() { - this.route.pathFromRoot.forEach(p => { - this.router.events.filter(e => e instanceof NavigationEnd).subscribe(e => { - console.log('language toggle is detecting a navigation end: have to update values, things might have changed!'); - this.updateValues(); - }); + // start listening to the stateservice for language updates + this.stateService.getLanguageObservable(this.route).subscribe(val => { + console.log('language toggle gets a language update from state service: ' + val); + this.show = (this.language === val); + console.log(' after language update, show: ' + this.show); }); + + } private updateValues() { @@ -39,13 +41,15 @@ export class LanguagetoggleComponent implements OnInit { console.log('languagetoggle: language is null from stateservice, ignoring'); return; } - console.log('languagetoggle gets lang: ' + lang); + console.log('languagetoggle (' + this.language + ') gets lang: ' + lang); if (lang === this.language) { console.log('languagetoggle: showing the component ' + lang); this.show = true; } else { + console.log('languagetoggle: NOT showing the component ' + lang); this.show = false; } + console.log(`show: ${this.show }`); } } diff --git a/src/app/components/root/root.component.ts b/src/app/components/root/root.component.ts index 69cf062..b2cba27 100644 --- a/src/app/components/root/root.component.ts +++ b/src/app/components/root/root.component.ts @@ -30,15 +30,18 @@ export class RootComponent implements OnInit { /** * Listen to changes in the param map (this is the root level, so will only see changes in 'language'. good! */ - this.route.paramMap.subscribe((paramMap: ParamMap) => { - const language = paramMap.get('language'); - console.log(`root comp listens for parammap: ${language}`) - // console.log('root: parammap changed ' + language); - if (language !== null) { - console.log('the subscriber of root changes the language to '+language); - this.stateService.setLanguage(language, this.route, this.router); - } - }); + // this.route.paramMap.subscribe((paramMap: ParamMap) => { + // const language = paramMap.get('language'); + // console.log(`root comp listens for parammap: ${language}`) + // // console.log('root: parammap changed ' + language); + // if (language !== null) { + // console.log('the subscriber of root changes the language to '+language); + // this.stateService.setLanguage(language, this.route, this.router); + // } + // }); + + // set the service, we know that this route is the one we need for language changes (parameter), so we gotta keep track of it + this.stateService.setRootRoute(this.route); // we listen to a 'navigation end' event -> at that point we need update our pagetype string this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => { diff --git a/src/app/services/state.service.ts b/src/app/services/state.service.ts index 679efcd..3875db9 100644 --- a/src/app/services/state.service.ts +++ b/src/app/services/state.service.ts @@ -8,10 +8,11 @@ export class StateService { // this keeps track of which type is enabled / disabled private tagFilter: any = []; private language: string; + private rootRoute: ActivatedRoute; constructor(private router: Router) { router.events.subscribe(event => { - console.log('stateservice detects a route event!' + event); + // console.log('stateservice detects a route event!' + event); }); } @@ -93,9 +94,56 @@ export class StateService { if (this.language !== language) { console.log('setting language (triggers navigate): ' + language); this.language = language; - router.navigate([language]); + + console.log('GOING TO NAVIGATE!'); + console.log(this.rootRoute.url); + + //ok, don't know how to do this cleanly... figure out 2 elements + //1: the language, we already know it + //2: the child path element, just get it from the rootroute + if (this.rootRoute.children.length !== 1) { + console.log('the root route has more than 1 child :/ NOT navigating now...'); + console.log(this.rootRoute.children); + } else { + const childRoute = this.rootRoute.children[0]; + // console.log('childroute: ' + childRoute.toString() + ' ' + childRoute.url.toString()); + // console.log(childRoute); + const navigationpath = new Array(); + navigationpath.push(language); + childRoute.url.forEach(segments => { + // console.log('url segments'); + // console.log(segments); + //add each of these segments to the navigation path + segments.forEach(s => navigationpath.push(s.path.toString())); + }); + // console.log('OUR navigation path'); + // console.log(navigationpath); + //actually navigate! + this.router.navigate(navigationpath); + } + + this.rootRoute.pathFromRoot.forEach(p => console.log(p)); + this.rootRoute.firstChild.fragment.subscribe(val => { + console.log('rootRoute.firstChild.fragment: ' + val); + }); + + // router.navigate([language]); } else { console.log('setting language did nothing: no navigation.') } } + + getLanguageObservable(route: ActivatedRoute) { + return this.rootRoute.paramMap.map(map => map.get('language')); + } + + setRootRoute(route: ActivatedRoute) { + this.rootRoute = route; + this.rootRoute.paramMap.map(map => map.get('language')).filter(l => l !== null).subscribe(l => { + this.language = l; + console.log('stateservice updated its internal lang value to ' + this.language); + } + ) + ; + } }