Hey Chris,
The issue you're running into here is that when you change routes from
/site/about to /site/FAQ the component is not actually going through it's
lifecycle because it has not been destroyed. /site/:view matches for both
of those URLs and therefore they both map to the same component. In the
above example, you are only calling createView() whenever the component is
constructed as a result of a NavigationEnd event, but that will only be an
appropriate pathway the first time this component is accessed due to how it
will be recycled.
What you will want to do, is make a subscription to the route params inside
of the ngOnInit lifecycle hook, that will ensure that the subscription is
made anytime the component is instantiated, and also will ensure it picks
up on any param change.
// Subscription collection so we can unsubscribe from them on destroy
private _subscriptions: Subscription[] = [];
// OnInit Hook, triggered each time the component is instantiated
public ngOnInit(): void {
// Add to our subscriptions collection
this._subscriptions.push(
// Subscribe to the ActivatedRoute for paramMap changes
this._route.paramMap.subscribe((paramMap) => {
// Retrieve the view named parameter
const view = paramMap.get('view');
// Check if we have a defined view
if (view) {
// Trigger the view switch
this.currentView(view);
}
})
);
}
// OnDestroy Hook
private _ngOnDestroy() {
// Unsubscribe from each Subscription
this._subscriptions.forEach((subscription: Subscription) => {
subscription.unsubscribe() });
}
The above should help solve your current problem, the only change you will
need to make is to allow your createView() method to accept a parameter.
On Sunday, February 25, 2018 at 11:53:24 AM UTC-5, Chris Anderson wrote:
>
> I figured, it was something like that. I eventually found the solution
> here -
> https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
>
> - by subscribing to the NavigationEnd event, I'm able to get the exact
> results I was looking for. What I ended up with was this:
>
>
> constructor(
> private messageService: MessageService,
> private route: ActivatedRoute,
> private location: Location,
> private router: Router
> ) {
>
> this.router.events.subscribe((e:any) => {if(e instanceof NavigationEnd)
> {this.createView();}});
> }
>
> ngOnInit() {
> this.messageService.add('Default component initialized');
> this.messageService.add('NarrowView: ->' + this.NarrowView);
> }
>
> createView() {
> this.News = false;
> this.Disclaimer = false;
> this.About = false;
> this.FAQ = false;
> this.NarrowView = true;
>
> var currentView = this.route.snapshot.paramMap.get('view');
>
> if (currentView != null) { currentView = currentView.toLowerCase();}
> switch (currentView) {
> case 'news': this.News = true; break;
> case 'disclaimer': this.Disclaimer = true; this.NarrowView = false;
> break;
> case 'about': this.About = true; break;
> case 'faq': this.FAQ = true; this.NarrowView = false; break;
> default: this.News = true; break;
> }
>
> this.messageService.add('currentView:' + currentView);
> this.messageService.add('NarrowView: ->' + this.NarrowView);
> }
>
>
>
>
> -Chris
>
> On Sunday, February 25, 2018 at 4:26:35 AM UTC-5, Sander Elias wrote:
>>
>> Hi Chris,
>>
>> Without seeing the code, I would say that you are not subscribing to the
>> router, but only to the static snapshot. The router is providing an
>> observable, that you can subscribe to to update your view.
>>
>> Regards
>> Sander
>>
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
