分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何为 Angular 10 项目中的每个页面实现功能，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何为 Angular 10 项目中的每个页面实现功能？

开发过程中遇到如何为 Angular 10 项目中的每个页面实现功能的问题如何解决？下面主要结合日常开发的经验，给出你关于如何为 Angular 10 项目中的每个页面实现功能的解决方法建议，希望对你解决如何为 Angular 10 项目中的每个页面实现功能有所启发或帮助；

你好，我正在我的 Angular 10 项目中尝试这样做

How to translate in Ionic 5— Internationalization and Localization 它工作得很好，但我想为每个页面而不只是一个页面实现它。我把代码放在一个服务中，但我不知道如何在 page.HTML 中调用它

translate.service.ts

  import { Injectable } from '@angular/core';
  import { Globalization } from '@ionic-native/globalization/ngx';
  import { Translateservice } from '@ngx-translate/core';

 @Injectable({
   provIDedIn: 'root'
  })
  export class TranslateConfigservice {

 public title: String;
 public title_2: String;
 public description: String;
 public name: String;
 public language: String;


  constructor(
    private globalization: Globalization,private _translate: Translateservice,) {
  });
 }

 ngOnInit() {
 }

this.platform.ready().then(() => {
  this.statusbar.styleDefault();
  this.splashScreen.hIDe();
});
if (this.platform.is('cordova')) {
  setTimeout(() => {
      thiS.UserData.registerFCM();
  },4500);
 }
}



 ionVIEwDIDEnter(): voID {
   this.getDeviceLanguage()
 }

 _initialiseTranslation(): voID {
    this._translate.get('title').subscribe((res: String) => {
    this.title = res;
  });
  this._translate.get('description').subscribe((res: String) => {
  this.description = res;
  });
   this._translate.get('title_2',{ value: 'John' }).subscribe((res: String) => {
    this.title_2 = res;
  });
   this._translate.get('data.name',{ name_value: 'Marissa Mayer' }).subscribe((res: String) => {
   this.name = res;
  });

 }

  public changeLanguage(): voID {
    this._translateLanguage();
  }

  _translateLanguage(): voID {
    this._translate.use(this.languagE);
    this._initialiseTranslation();
  }

  _initTranslate(languagE) {
   // Set the default language for translation Strings,and the current language.
   this._translate.setDefaultLang('en');
    if (languagE) {
      this.language = language;
    }
    else {
      // Set your language here
      this.language = 'en';
     }
    this._translateLanguage();
   }

  getDeviceLanguage() {
     if (window.Intl && typeof window.Intl === 'object') {
     this._initTranslate(navigator.languagE)
   }
   else {
     this.globalization.getPreferredLanguage()
      .then(res => {
        this._initTranslate(res.value)
      })
    .catch(e => {Console.log(E);});
   }
 }
 }

page.HTML

 <ion-item>
  <ion-SELEct [(ngModel)]="language" [value]="language" (ionChangE)="changeLanguage()">
    <ion-SELEct-option value="en">English</ion-SELEct-option>
    <ion-SELEct-option value="es">Spanish</ion-SELEct-option>
    <ion-SELEct-option value="fr">french</ion-SELEct-option>
  </ion-SELEct>
</ion-item>

<ion-grID>
  <ion-row>
    <ion-col>
      Translated by http Loader - From external JsON
    </ion-col>
  </ion-row>
</ion-grID>
<ion-card class="ion-padding">
  <ion-card-header>
    Simple
  </ion-card-header>
  <ion-card-content>
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
  </ion-card-content>
</ion-card>
<ion-card class="ion-padding">
  <ion-card-header>
    Simple with directive
  </ion-card-header>
  <ion-card-content>
    <h1 translate>title</h1>
    <p [translate]="'description'"></p>
  </ion-card-content>
</ion-card>

<ion-card class="ion-padding">
  <ion-card-header>
    With Params
  </ion-card-header>
  <ion-card-content>
    <h1>{{ title_2 }}</h1>
    <p>{{ description }}</p>
  </ion-card-content>
</ion-card>

<ion-card class="ion-padding">
  <ion-card-header>
    With params,with directive
  </ion-card-header>
  <ion-card-content>
    <h1 [translate]="'title_2'" >title</h1>
    <p [translate]="'description'"></p>
  </ion-card-content>
</ion-card>
<ion-card class="ion-padding">
  <ion-card-header>
    With Params,nested JsON data and directive
  </ion-card-header>
  <ion-card-content>
    <h1>{{name}}</h1>
    <h1 translate >data.name</h1>
  </ion-card-content>
</ion-card>

我只调用了 page.ts 中的服务

  import { TranslateConfigservice } from '../../services/translate/translate.service';

有什么想法吗？那么全球化模块呢？它已被弃用？谢谢

解决方法

更新：要为每个页面翻译，您必须创建一个服务来完成它。您可以将所有代码示例放在服务中，以便在整个应用程序中使用它。安装 ngx-translate 并在 app.module.ts 中声明库后的简单方法。在您需要翻译的每个页面上导入服务。创建一个文件：translate.service.ts 并放入：

  import { Injectable } from '@angular/core';
  import { Translateservice } from '@ngx-translate/core';

  @Injectable({
    providedIn: 'root'
  })
  export class TranslateConfigservice {

    constructor(public translate: TranslateservicE) {
      translate.addLangs(['en','fr']);
      translate.setDefaultLang('en');

      const browserLang = translate.getBrowserLang();
      translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
    }