У меня есть универсальное приложение angular 7 на двух языках: испанском sh и английском sh. Я хочу отобразить сайт на настроенном пользователем языке. Для этого у меня есть следующие настройки:
Сначала мой app.component.html
, у которого есть только маршрутизатор-розетка, как это:
<router-outlet></router-outlet>
в моем app-routing.module.ts
У меня есть следующее конфигурация:
{
path: 'es',
data: { lang: 'es' },
component: LanguageComponent,
children: [
{
path: '',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
},
{
path: '**',
redirectTo: 'pagina-no-encontrada'
}
],
},
{
path: 'en',
data: { lang: 'en' },
component: LanguageComponent,
children: [
{
path: '',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
},
{
path: '**',
redirectTo: 'page-not-found'
}
],
},
{
path: '',
component: LanguageComponent,
pathMatch: 'full'
},
{
path: '**',
redirectTo: '/es/pagina-no-encontrada',
pathMatch: 'full'
},
Я делаю так, чтобы LanguageComponent
обнаружил пользовательский язык и перенаправил на соответствующий /es
или /en
.
Мой language.component.ts
имеет следующие логики c:
import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID, Renderer2 } from '@angular/core';
import { ActivatedRoute, Data, Router } from '@angular/router';
import { TranslateService } from '../services/translate.service';
import { Subscription } from 'rxjs/internal/Subscription';
import { LANG_EN_NAME } from '../translate/lang-en';
import { LANG_ES_NAME } from '../translate/lang-es';
import { isPlatformBrowser, DOCUMENT } from '@angular/common';
@Component({
selector: 'app-language',
templateUrl: 'language.component.html',
styleUrls: ['language.component.scss']
})
export class LanguageComponent implements OnInit, OnDestroy {
private subscription: Subscription;
private isPlatformBrowser: boolean;
constructor(private activatedRoute: ActivatedRoute,
private translate: TranslateService,
private router: Router,
@Inject(PLATFORM_ID) private platformId: Object) {}
ngOnInit(): void {
this.isPlatformBrowser = isPlatformBrowser(this.platformId);
this.subscription = this.activatedRoute.data.subscribe((d: Data) => {
if (d['lang'] !== undefined) {
this.translate.use(d['lang']);
} else if (this.isPlatformBrowser && navigator) {
const userLanguage = navigator.language;
if (userLanguage) {
if (userLanguage.startsWith('en')) {
this.router.navigateByUrl(LANG_EN_NAME);
} else {
this.router.navigateByUrl(LANG_ES_NAME);
}
}
} else {
this.router.navigateByUrl(LANG_ES_NAME);
}
});
}
ngOnDestroy(): void {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
}
, поэтому я могу успешно определить язык с помощью навигатора и отобразить страницу, перейдя в соответствующий раздел. Для каждого компонента, такого как HomeComponent
в HomeModule, я вызываю SeoService
, который устанавливает заголовок, мета-описание и устанавливает тег HTML lang в зависимости от установленного языка.
Проблема У меня очень странно, что касается результатов поиска Google. Иногда я получаю сайт с заголовком, отображаемым на испанском sh, а затем описание на английском sh, иногда - на английском sh ... и все это происходит, поскольку я решил начать использовать навигатор в качестве драйвера обнаружение языка.
Во-первых, я не знаю, является ли мой подход лучшим вариантом в этом сценарии, и в случае его появления вы сталкивались с этой проблемой языковых движков Google?
ОБНОВЛЕНИЕ: Я думаю, что мой вопрос больше связан с тем, что для выполнения SSR мне нужно знать язык браузера пользователя. Можно ли как-то «передать» это значение на сервер для выполнения этого рендеринга? В противном случае я, честно говоря, не знаю, как узнать «пользовательские настройки», чтобы выполнить фактический рендеринг страницы, и быть «дружественным к Google», если это имеет смысл