Блог

У меня есть маршрут под названием «партнеры», и когда путь попадает в «партнеры/:слизняк», я слушаю изменения активированного маршрута, чтобы обновить переведенное название.

Когда я впервые ввожу партнерский компонент, заголовок страницы переводится и отображается правильно. Но когда я перехожу к нижней части этого компонента и переключаюсь на другого партнера, заголовок моей страницы переходит в «партнеры» без правильного заголовка страницы.

подсказки

• после обновления страницы заголовок меняется на хороший
• если я изменю URL напрямую, то заголовок страницы также будет правильным

Что я пропустил?

Мой файл маршрутизации:

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

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

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

И мой ПартнерКомпонент

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

и на другом компоненте с маршрутными ссылками я перемещаюсь так:

  <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"
    >
 

Добавьте это в ngOnInit() компонента (компонента-партнера), который подписывается на параметр:

 ngOnInit(): void {
  // ... subscription to param
  this.router.routeReuseStrategy.shouldReuseRoute = () => false
}
 

Рабочее решение:

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