Did some pathing fixes and language works for HOME now.

This commit is contained in:
Joachim Nielandt 2018-03-25 16:09:44 +02:00
parent cbb62012df
commit 9fdf5e9ebd
4 changed files with 73 additions and 18 deletions

View File

@ -1 +1 @@
<ng-content *ngIf="show"></ng-content>
<ng-content *ngIf="show===true"></ng-content>

View File

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

View File

@ -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 => {

View File

@ -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<string>();
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);
}
)
;
}
}