-2

嗨，我是 Ionic/Angular 的新手，我遇到了一个问题，我在里面堆了 20 多天。我制作了一个小应用程序，我想让它成为多语言 RTL 和 LTR，所以我在这里关注文档： https ://ionicframework.com/docs/theming/rtl-support/

但仍然有同样的问题

错误类型错误：无法读取未定义的属性“setDir”

这是我的代码

segmentChanged(event) {
    this.translateService.use('ar');
    this.test = "ar";
    if (this.test == "ar"){ 
      this.platform.setDir('rtl', true);
      }else{
this.platform.setDir('ltr', true);}

我使用ionic 3和ngx-translate

4

1 回答 1

0

这是 menu.ts

import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, Events } from 'ionic-angular';
import { HomePage } from '../home/home';
import { Signup } from '../signup/signup';
import { Login } from '../login/login';
import * as WC from 'woocommerce-api';
import { ProductsByCategory } from '../products-by-category/products-by-category'
import { Storage } from '@ionic/storage';
import { Cart } from '../cart/cart';
import { TranslateService } from '@ngx-translate/core';
import { Platform } from 'ionic-angular';


@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class Menu {

  homePage: Component;
  WooCommerce: any;
  categories: any[];
  @ViewChild('content') childNavCtrl: NavController;
  loggedIn: boolean;
  user: any;
  test: any;
  platform:any;

  languageSelected : any = 'en';

  dir: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage, public modalCtrl: ModalController, private events: Events, private translateService: TranslateService,public plt: Platform) {
    this.homePage = HomePage
    this.categories = [];
    this.user = {};

    this.WooCommerce = WC({
      url: "http://chocolate.derdar.sa/",
      consumerKey: "...........................",
      consumerSecret: ".........................."
    });


    this.WooCommerce.getAsync("products/categories").then((data) => {
      console.log(JSON.parse(data.body).product_categories);

      let temp: any[] = JSON.parse(data.body).product_categories;

      for (let i = 0; i < temp.length; i++) {
        if (temp[i].parent == 0) {

          if(temp[i].slug == "chocolate"){
            temp[i].icon = "ribbon";
          }
          if(temp[i].slug == "dragee"){
            temp[i].icon = "egg";
          }
          if(temp[i].slug == "flowers"){
            temp[i].icon = "rose";
          }
          if(temp[i].slug == "plates"){
            temp[i].icon = "basket";
          }
          if(temp[i].slug == "vases"){
            temp[i].icon = "pint";
          }

          this.categories.push(temp[i]);
        }
      }

    }, (err) => {
      console.log(err)
    });

    this.events.subscribe("updateMenu", () => {
      this.storage.ready().then(() => {
        this.storage.get("userLoginInfo").then((userLoginInfo) => {

          if (userLoginInfo != null) {

            console.log("User logged in...");
            this.user = userLoginInfo.user;
            console.log(this.user);
            this.loggedIn = true;
          }
          else {
            console.log("No user found.");
            this.user = {};
            this.loggedIn = false;
          }

        })
      });


    })

  }

  ionViewDidEnter() {

    this.storage.ready().then(() => {
      this.storage.get("userLoginInfo").then((userLoginInfo) => {

        if (userLoginInfo != null) {

          console.log("User logged in...");
          this.user = userLoginInfo.user;
          console.log(this.user);
          this.loggedIn = true;
        }
        else {
          console.log("No user found.");
          this.user = {};
          this.loggedIn = false;
        }

      })
    })


  }

  openCategoryPage(category) {

    this.childNavCtrl.setRoot(ProductsByCategory, { "category": category });

  }

  openPage(pageName: string) {
    if (pageName == "signup") {
      this.navCtrl.push(Signup);
    }
    if (pageName == "login") {
      this.navCtrl.push(Login);
    }
    if (pageName == "logout") {
      this.storage.remove("userLoginInfo").then(() => {
        this.user = {};
        this.loggedIn = false;
      })
    }
    if (pageName == "cart") {
      let modal = this.modalCtrl.create(Cart);
      modal.present();
    }

  }
  segmentChanged(event) {
    this.translateService.use('ar');
    this.test = "ar";
    if (this.test == "ar"){ 
      this.platform.setDir('rtl', true);
      }

}
segmentChanged2(event) {
  this.translateService.use('en');
  this.test = "en";
  if (this.test == "en"){ 
    this.platform.setDir('rtl', true);
    }
}


}

这是 menu.html

<!--*****************************************-->
<!-- LTR Menu : Overlaying From Left To Right-->
<ion-menu *ngIf="this.platform.setDir()==='ltr'" 
side="left" [content]="content">

  <!-- Side menu header option -->
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <!-- Side menu content option -->
    <ion-content class="card-background-page">

    <ion-card>
      <img src="./assets/imgs/backback.png" />
      <div class="card-title">WOOIONIC</div>
      <div class="card-subtitle">Keep Shopping</div>
    </ion-card>





    <button ion-button value="en" (click)="segmentChanged2($event)">
      {{ 'BUTTONS.btn_eng' | translate }}
    </button>
    <button ion-button value="ar" (click)="segmentChanged($event)">
      {{ 'BUTTONS.btn_ara' | translate }}
    </button>






    <ion-list>
      <ion-item-divider color="danger">Categories</ion-item-divider>

      <ion-item *ngFor="let category of categories" text-wrap (click)="openCategoryPage(category)" menuClose>
        <ion-icon [name]="category.icon" item-left large></ion-icon>
        <h2> {{ category.name }} </h2>
        <p> {{ category.description }}</p>
      </ion-item>

      <ion-item-divider color="danger">Account</ion-item-divider>

      <ion-item (click)="openPage('signup')" menuClose *ngIf="!loggedIn">
        <ion-icon name="md-clipboard" item-left large></ion-icon>
        <h2>Sign Up</h2>
        <p>For a new account</p>
      </ion-item>

      <ion-item (click)="openPage('login')" menuClose *ngIf="!loggedIn">
        <ion-icon name="log-in" item-left large></ion-icon>
        <h2>Login</h2>
        <p>Using email and password</p>
      </ion-item>

      <ion-item *ngIf="loggedIn" menuClose>
        <ion-icon name="contact" item-left large></ion-icon>
        <h2>{{ (this.user.firstname == '' ? this.user.username : this.user.firstname) || "" }}</h2>
        <p>Welcome</p>
      </ion-item>

      <ion-item *ngIf="loggedIn" (click)="openPage('cart')" menuClose>
        <ion-icon name="cart" item-left large></ion-icon>
        <h2>Your Cart</h2>
        <p>Check items in your cart</p>
      </ion-item>

      <ion-item *ngIf="loggedIn" (click)="openPage('logout')" menuClose>
        <ion-icon name="log-out" item-left large></ion-icon>
        <h2>Logout</h2>
        <p>of your Account</p>
      </ion-item>


    </ion-list>
  </ion-content>

</ion-menu>


<!--*****************************************-->
<!-- RTL Menu : Overlaying From Left To Right-->
<ion-menu *ngIf="this.platform.setDir()==='rtl'" 
side="right" [content]="content">

  <!-- Side menu header option -->
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <!-- Side menu content option -->
    <ion-content class="card-background-page">

    <ion-card>
      <img src="./assets/imgs/backback.png" />
      <div class="card-title">WOOIONIC</div>
      <div class="card-subtitle">Keep Shopping</div>
    </ion-card>





    <button ion-button value="en" (click)="segmentChanged2($event)">
      {{ 'BUTTONS.btn_eng' | translate }}
    </button>
    <button ion-button value="ar" (click)="segmentChanged($event)">
      {{ 'BUTTONS.btn_ara' | translate }}
    </button>






    <ion-list>
      <ion-item-divider color="danger">Categories</ion-item-divider>

      <ion-item *ngFor="let category of categories" text-wrap (click)="openCategoryPage(category)" menuClose>
        <ion-icon [name]="category.icon" item-left large></ion-icon>
        <h2> {{ category.name }} </h2>
        <p> {{ category.description }}</p>
      </ion-item>

      <ion-item-divider color="danger">Account</ion-item-divider>

      <ion-item (click)="openPage('signup')" menuClose *ngIf="!loggedIn">
        <ion-icon name="md-clipboard" item-left large></ion-icon>
        <h2>Sign Up</h2>
        <p>For a new account</p>
      </ion-item>

      <ion-item (click)="openPage('login')" menuClose *ngIf="!loggedIn">
        <ion-icon name="log-in" item-left large></ion-icon>
        <h2>Login</h2>
        <p>Using email and password</p>
      </ion-item>

      <ion-item *ngIf="loggedIn" menuClose>
        <ion-icon name="contact" item-left large></ion-icon>
        <h2>{{ (this.user.firstname == '' ? this.user.username : this.user.firstname) || "" }}</h2>
        <p>Welcome</p>
      </ion-item>

      <ion-item *ngIf="loggedIn" (click)="openPage('cart')" menuClose>
        <ion-icon name="cart" item-left large></ion-icon>
        <h2>Your Cart</h2>
        <p>Check items in your cart</p>
      </ion-item>

      <ion-item *ngIf="loggedIn" (click)="openPage('logout')" menuClose>
        <ion-icon name="log-out" item-left large></ion-icon>
        <h2>Logout</h2>
        <p>of your Account</p>
      </ion-item>


    </ion-list>
  </ion-content>

</ion-menu>

<ion-nav #content [root]="homePage"></ion-nav>
于 2017-11-19T06:20:49.673 回答