Angular 7 SSR использовать навигатор для определения параметров - PullRequest
0 голосов
/ 19 марта 2020

У меня есть универсальное приложение 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», если это имеет смысл

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...