Угловая навигация по маршруту 2/4/5 только один раз перезагружает один и тот же маршрут - PullRequest
Новая
       8

Угловая навигация по маршруту 2/4/5 только один раз перезагружает один и тот же маршрут

0 голосов
/ 24 апреля 2018

У меня есть многоязычный сайт, который использует раскрывающийся список, позволяющий пользователю менять язык между английским и немецким.

Это компонент нижнего колонтитула в моем приложении, и при изменении выбора приложение запускает функцию changeLanguage (): 

     constructor(
        private pageService: PageService,
        private router: Router,
        private el: ElementRef,
        private cd: ChangeDetectorRef,
        private meta: Meta,
        private route: ActivatedRoute
    ) { }

    ngOnInit(): void {
        var nativeElement: HTMLElement = this.el.nativeElement,
           parentElement: HTMLElement = <HTMLElement>nativeElement.parentElement;
        // move all children out of the element
        while (nativeElement.firstChild) {
           parentElement.insertBefore(nativeElement.firstChild, nativeElement);
        }
        // remove the empty element(the host)
        parentElement.removeChild(nativeElement);

        this.routerSub$ = this.router.events.subscribe(event => {
           if (event != null) {
               if (event instanceof NavigationEnd) {
                   this.languageCode = SiteContext.getLanguageCode(event.urlAfterRedirects);
                   if (this.languageCode == "en" && this.selectedLanguage.name == 'Deutsch') { this.selectedLanguage = this.languages[1]; }
               }
           }
        });
    }
    ngAfterViewInit() {
    }
    ngOnDestroy() {
        if (this.routerSub$ != null) this.routerSub$.unsubscribe();
        this.subscriptions.forEach((subscription: Subscription) => { subscription.unsubscribe(); });
        this.subscriptions = [];
    }
changeLanguage(lang) {
        let langCode: string = (lang.name == 'Deutsch' ? "de" : "en");
        this.router.navigate([langCode, 'home']);
    }

Так что это должно перенаправить либо на «/ de / home», либо на «/ en / home /», а остальная часть приложения выбирает выбор языка и соответственно загружает контент.

При первом изменении параметров языка это работает отлично, обновляя URL и загружая новый контент. Когда опция снова меняется, ничего не происходит. Функция changeLanguage () запускается, но больше ничего.

Кажется, что это постоянно с другими проблемами SO, связанными с отсоединением и повторным использованием маршрутов в сборке Angular (это v5 между прочим). Однако я не пробовал ничего подобного из других подобных вопросов, чтобы решить проблему.

Я сосредоточился на этом вопросе / ответе безуспешно - Как реализовать RouteReuseStrategy shouldDetach для конкретных маршрутов в Angular 2 . Я также в настоящее время реализую класс CustomReuseStrategy из этого ответа.

Для получения дополнительной информации:

app.routing.ts: 

const appRoutes: Routes = [
    //{ path: '', redirectTo: '/de/home', pathMatch: 'full' },
    { path: 'de/v2-home', component: HomeComponent, data: { animation: 'de/v2-home' } },
    { path: '', redirectTo: '/de/v2-home', pathMatch: 'full' },
    { path: ':lang/v2-home', component: HomeComponent, data: { animation: ':lang/v2-home' } },
];

app.module.ts: 

import { RouteReuseStrategy } from "@angular/router";
@NgModule({
    [...],
    providers: [
        {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
    ]
)}
export class AppModule {
}

Просто не уверен, что я что-то упустил в моей реализации с навигацией здесь?

Спасибо.

1 Ответ

0 голосов
/ 27 апреля 2018

Код, который фактически меняет язык, должен быть отделен от ngOninit (). Я имею в виду, что вам не следует перезагружать весь компонент только для смены языка.

Вы должны подписаться на параметры вашего маршрута через функцию «ActivatedRoute». 

import { ActivatedRoute } from '@angular/router';

Затем введите его в ваш компонент: 

constructor (private _route : ActivatedRoute){}

Затем внутри ngOnInit подпишитесь на ваш параметр маршрута, т.е. 'lang': 

ngOninit()
{
    this._route.params.
    subscribe(params => 
    {
       this.changeLanguage(params[":lang"]);
       //Any incoming parameter must be sanitized for obvious reasons.
    }
}

changeLanguage(language)
{
    //change language logic here
}

Выбор пользователя должен быть передан в качестве параметра функции changeLanguage ().

P.S. - Если это поможет, вот мой пример для угловых 2+: https://github.com/oneinazillion/CEVI

...