Блог

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

Вот кнопка:

   <mat-menu #menu="matMenu">
    <button (click)="change_L1_Language('en-US')">English<img width="50" alt="Flag of the United States" src="../assets/images/flags/us-flag.svg"></button>
    <button (click)="change_L1_Language('es')">Español<img width="50" alt="Flag of Spain" src="../assets/images/flags/es-flag.svg"></button>
    <button (click)="change_L1_Language('zh')">中文<img width="50" alt="Flag of China" src="../assets/images/flags/ch-flag.svg"></button>
    <button (click)="change_L1_Language('jp')">日本人<img width="50" alt="Flag of Japan" src="../assets/images/flags/jp-flag.svg" class="flag-border"></button>
  </mat-menu>
  

Контроллер обрабатывает щелчок:

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { LanguageService } from '../language.service';

export class HeaderComponent implements OnInit {
  language: string = 'en-US';
  newLanguage: string = 'en-US';
  @Output() changeLanguageData: EventEmitter<string> = new EventEmitter<string>();

changeLanguage(newLanguage) {
    console.log(this.language);
    switch (true) {
      case (newLanguage === 'en-US'):
      this.language = 'en-US';
      break;

      case (newLanguage === 'es'):
      this.language = 'es';
      break;

      case (newLanguage === 'zh'):
      this.language = 'zh';
      break;

      case (newLanguage === 'jp'):
      this.language = 'jp';
      break;

      default:
      console.log("Error in switch-case.");
    }
    console.log(this.language);
    this.changeLanguageData.emit(this.language); // send data to parent
    this.LanguageService.changeLanguage().subscribe(); // receives data from a service, doesn't send data
  }
  

Контроллер подключен к LanguageService (службе), но контроллер может использовать только данные из службы, он не может передавать данные в службу.

Контроллер также имеет Event Emitter возможность отправлять данные родительскому компоненту. Это не может отправить данные в службу, потому что у службы нет .html шаблона для связи между компонентами.

Глядя на документацию Angular, она показывает, как компоненты в семействе могут взаимодействовать через службу: родительский и дочерний элементы взаимодействуют через службу. Если я изменю это на

 @Injectable({
  providedIn: 'root'
})
  

будет ли эта служба предоставлять данные всем компонентам моего приложения?

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

В документации показаны три метода отправки данных от дочернего элемента к родительскому. Метод, с которым я знаком, Родительский прослушивает дочернее событие с помощью an EventEmitter , не будет работать, потому что у службы нет .html шаблона для связывания компонентов.

Вам нужно внедрить службу как зависимость, например:

TS:

 constructor(private languageService: LanguageHandler) { }
  

Затем вы можете использовать его в своем компоненте, чтобы изменять данные по щелчку:

HTML:

 <button (click)="changeLanguage("en-US")>Change to English</button>
  

TS:

 changeLanguage(languageToChangeTo) {
  languageService.currentLanguage = languageToChangeTo;
}