Jump to content
  • 0

Как переписать переключатель языка?


cyklop77
 Share

Question

помогите пожалуйста советом и направьте в правильное русло так сказать

на angular2 сделал небольшой сайт, который состоит из двух страничек: расписание и список людей. архитектурно он состоит из главного компонента и двух компонентов страничек

сайт двуязычный. для этого я в главный компонент поместил стандартный material-переключатель и связал его с глобальным сервисом. в этом глобальном сервисе содержатся переменные, которые должны быть видны из любой части сайта. в частности там хранится признак установленного в настоящий момент языка

переключатель в шаблоне главного компонента:

<mat-slide-toggle class="toggler-lang" (click)="toggleLang()" [(ngModel)]="isEnLang"></mat-slide-toggle>    

сервис глобальных переменных:

private isEnLang = new BehaviorSubject(false);

constructor() { }

getLangState(): Observable<boolean> {
  console.log('this.isEnLang', this.isEnLang);
    return this.isEnLang;
};  

setLangState(state): void {
  console.log('set isEnLang', state);
  this.isEnLang.next(state);
};  

функционал главного компонента для смены языка:

private isEnLang: boolean;

constructor(private globalVarsService: GlobalVarsService) {};

ngOnInit() {
    this.checkLang();
};

private toggleLang() {
    this.isEnLang = !this.isEnLang;
    this.globalVarsService.setLangState(this.isEnLang);
};

private checkLang(): void {
  this.globalVarsService.getLangState().subscribe(data => setTimeout(() => {
    console.log('subscribe', data);
    this.isEnLang = data;
  }, 0));     
}; 

проблема в том, что мне приходится в каждом компоненте, в котором используется переключения языка подключать этот "глобальный" сервис и настраивать подписку получения изменения "глобальной" переменной isEnLang. и что самое страшное - этот код дублируется в каждом компоненте.

сейчас сайт состоит из двух страничек и такое дублирование кода не страшно, но по мере роста сайта будет очевидно, что решение хоть и рабочее, но неверное

подскажите пожалуйста более практичное решение

даже если остальные решения более неудобные, то всё равно расскажите про них. всегда лучше знать несколько вариантов решения проблемы

GITHUB

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By psywalker
      Всем привет! Вкратце: ищу учителя-помощника по TypeScript и Vue.js. О времени занятий и цене договоримся. Пишите, пожалуйста, на почту (psywalker09@gmail.com), в ЛС в ВК (https://vk.com/psywalker84), или в ЛС (здесь на форуме)
    • By cyklop77
      ищу работу angular2-разработчика. пример лучшего кода здесь: https://github.com/zlodiak/ng2_answers_web
      контакты:
      email: kalinin.sergey.81@gmail.com
      skype: cyklop771
    • By cyklop77
      Подскажите пожалуйста как в angular2 при помощи rxjs через каждые 5 секунд получать данные с сервера. Вот мой код, он работает, но есть проблема.
      компонент:
      import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; import 'rxjs/add/operator/switchMap'; private getUserTasks(userId): void {     Observable       .interval(5000)       .switchMap(() => this.tasksService.getUserTasks(userId))       .subscribe(           data => {               this.userTasks = JSON.parse(data);                                console.log('userTasks', this.userTasks);           }       ) }; сервис:
      import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; @Injectable() export class TasksService {   constructor(private http: HttpClient) { };   getUserTasks(userId): Observable<any> {       return this.http.get('http://127.0.0.1:8000/app_tasks/user_tasks?user_id=' + userId);   }; }  
      Проблема в том, что первый запрос отправляется после того как пользователь подождёт 5 секунд, глядя в белый экран. А мне нужно чтобы первый запрос отправлялся сразу после загрузки страницы. 
      Я мог бы повесть индикатор или спиннер, но дело в том, что, возможно, период придётся увеличить до 60 - 120 сек. Всё это время смотреть на индикатор неприятно пользователю
    • By cyklop77
      ребята, скажите пожалуйста что-нибудь про эту поделку. исходники здесь
      верстал только по браузеры мобильных устройств. бекенда нет поэтому для хранения информации используется localStorage. вот список паролей для входа:
      ADMINS: user2 / qwerty2 user4 / qwerty4 USERS: user1 / qwerty1 user3 / qwerty3 user5 / qwerty5 user6 / qwerty6 user7 / qwerty7 хотелось бы услышать что-нибудь по js, но вряд ли кто-нибудь будет копаться. поэтому пишите общее впечатление, юзабилити и т.п.
    • By cyklop77
      ребята, помогите пожалуйста исправить кривыми руками установленный компонент из angular 2 material
      я пытался запустить компонент диалога в самой простой форме. вот что у меня получилось. проблема в том, что после клика по кнопке диалог открывается шде тосбоку экрана, почти за его пределами. кроме того консоль выводит следующее сообщение об ошибке:
      app.module.ts:
      import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MdButtonModule, MdDialogModule } from '@angular/material'; import { AppComponent } from './app.component'; import { ConvDialogComponent } from './conv-dialog/conv-dialog.component'; @NgModule({ declarations: [ AppComponent, ConvDialogComponent ], imports: [ MdDialogModule, BrowserAnimationsModule, MdButtonModule, BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } app.component.ts:
      import { Component } from '@angular/core'; import { MdDialog } from '@angular/material'; import { ConvDialogComponent } from './conv-dialog/conv-dialog.component'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { selectedOption: string; constructor(public dialog: MdDialog) {}; private openMoneyConverter(): void { console.log(111); this.dialog.open(ConvDialogComponent); }; } conv-dialog.component.ts:
      import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-conv-dialog', templateUrl: './conv-dialog.component.html', styleUrls: ['./conv-dialog.component.css'] }) export class ConvDialogComponent implements OnInit { constructor() { } ngOnInit() { } }  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy