如何使用单选按钮将我的 Angular 网站从英语切换为西班牙语？

Question

我正在尝试创建一个有角度的网站，在其中选择一种语言并按下一个按钮，它将我的所有页面的文本更改为该语言，例如，如果我单击西班牙语，则下一个屏幕上的所有文本都是西班牙语，等等...

<div class="container tb-10">
    <form (ngSubmit)="onSubmit(langForm)" #langForm="ngForm">
        <div>
            <div class="row">
                <h4>Please select a language:</h4>
                <div class="form-group">
                    <div>
                        <label>
                            <input type="radio" name="language" #lang value="e" ngModel> English&nbsp;&nbsp;
                        </label><br>

                        <label>
                            <input type="radio" name="language" #lang value="s" ngModel> Spanish&nbsp;&nbsp;
                        </label>
                    </div>
                </div>
                <div>
                    <h4>Para continuar en Español, por favor seleccione Español.</h4>
                </div>     
                <div>
                    <!-- Add this line where you want to show the error message -->
                    <p *ngIf="errorMessage">{{errorMessage}}</p>
                </div>   
            </div>
        </div>
        <footer>
            <button id="exit" class="btn btn-danger pull-left" >Exit</button>
            <button type="submit" class="btn btn-primary"  (click)="navigateIfYes(lang)"> Next </button>
        </footer>
    </form>
</div>

组件.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm } from '@angular/forms';
import { NgModel } from '@angular/forms';
import { FormGroup, FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-language-select',
  templateUrl: './language-select.component.html',
  styleUrls: ['./language-select.component.css']
})
export class LanguageSelectComponent {

constructor(private router: Router) {}

errorMessage?: string;

navigateIfYes(input: HTMLInputElement) {
  if(input.classList.contains('ng-untouched')) {
    this.errorMessage = 'Please click on one of the option buttons above 
before submitting form!'
  } else {
    this.errorMessage = undefined
    this.router.navigateByUrl("/government");
  }
}

ngOnInit(): void {}

onSubmit(form: NgForm){
  console.log(form);
 }

}

Answer 1

创建一个服务来存储当前语言。这项服务可以简单如下：

export class LanguageService {

  private currentLanguage: string = 'en';

  getCurrentLanguage(): string {
    return this.currentLanguage;
  }

  setCurrentLanguage(language: string): void {
    this.currentLanguage = language;
  }
}

组件.ts

export class LanguageSelectComponent implements OnInit {

  selectedLanguage: string = 'en';

  constructor(private languageService: LanguageService, private router: Router) { }

  ngOnInit(): void { }

  onSubmit(): void {
    this.languageService.setCurrentLanguage(this.selectedLanguage);
    this.router.navigateByUrl('/government', {queryParams: {lang: this.selectedLanguage}});
  }
}

组件.html

<div class="container tb-10">
  <form (ngSubmit)="onSubmit()">
    <div>
      <div class="row">
        <h4>Please select a language:</h4>
        <div class="form-group">
          <div>
            <label>
              <input type="radio" name="language" [(ngModel)]="selectedLanguage" value="en"> English&nbsp;&nbsp;
            </label>
            <br>
            <label>
              <input type="radio" name="language" [(ngModel)]="selectedLanguage" value="s"> Spanish&nbsp;&nbsp;
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>