1

I have route called 'partners' and when path is hitting 'partners/:slug' i'm listening for activatedRoute changes to update translated title.

When i first enter PartnerComponent page title is translated and displayed correct. But when i'm going to the bottom of that component and changing to other partner my page title goes to 'partners' without correct page title.

HINTS

  • after page refresh title is changing for the good one
  • if i change url directly then page title is also correct

What did i miss?

My routing file:

import { PartnerComponent } from './container/partner.component';

const routes: Routes = [
    {
        path: ':slug',
        component: PartnerComponent,
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
})
export class PartnersRoutingModule {}

And my PartnerComponent

@Component({
    selector: 'app-partner',
    templateUrl: './partner.component.html',
    styleUrls: ['./partner.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [HttpService],
})
export class PartnerComponent implements OnInit, OnDestroy {
    partner$ = new BehaviorSubject<Partner>(null);
    private subscriptions = new Subscription();

    constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute,
        private httpService: HttpService,
        private windowService: WindowService,
        private routingTabTitleService: RoutingTabTitleService,
    ) {}

    ngOnInit(): void {
        this.subscriptions.add(
            this.activatedRoute.params
                .pipe(
                    map((params) => params.slug as string),
                    mergeMap((slug) => {
                        return this.httpService.getPartner(slug);
                    }),
                    tap((partner) => {
                        this.partner$.next(partner);
                        this.displayTranslatedProduct(partner.name);
                        this.windowService.scrollTop();
                    }),
                    catchError(() => {
                        void this.router.navigate(['pl', 'not-found'], { skipLocationChange: true });
                        return of(null);
                    }),
                )
                .subscribe(),
        );
    }

    displayTranslatedProduct(partnerName: string): void {
        const translatedTitle = this.routingTabTitleService.translateTitle('PAGE.TITLE', 'partner');
        this.routingTabTitleService.setTitle(`${translatedTitle}: ${partnerName}`);
       
    }

    ngOnDestroy(): void {
        this.subscriptions.unsubscribe();
    }
}

and on other component with routerLinks i'm navigating like this:

 <a
        *ngFor="let partner of partners"
        [routerLink]="'/partners/' + partner.slug | localize"
        class="partner-logo d-flex align-items-center justify-content-center pointer flex-wrap"
    >
Improve this question
1
  • Capital letters is not nice. Commented Sep 4, 2021 at 22:04

2 Answers 2

Reset to default
4

Add this to the ngOnInit() of the component (PartnerComponent) that is subscribing to the param:

ngOnInit(): void {
  // ... subscription to param
  this.router.routeReuseStrategy.shouldReuseRoute = () => false
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Let me know if this works, if not I'll have another look. If you make a StackBlitz we can more easily help you with your code. Cheers
This is working for that problem, but when i leave partners section into Home Page for example then page title is not updating because of that.
0

Working solution:

ngOnInit(): void {
    this.activatedRoute.params.pipe(tap(() =>  {
        void this.router.navigate([this.router.url], { relativeTo: this.activatedRoute, skipLocationChange: false });
    })).subscribe();        
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.