Я пытаюсь сделать приложение для Ionic, и чтобы сделать мой код немного более организованным, я подумал о том, чтобы разделить определенные вещи в других модулях и импортировать их, проблема в том, что я получаю 'undefined' при назначении статическая переменная из другого модуля в модуль, в который я пытаюсь ее импортировать.
Я попытался сделать экспортированный модуль статичным, поэтому module.ts (который я сделал вручную) выглядит так:
/*--------- Menu options---------*/
export class AppPages{
public static pages = [
{
title: 'Inicio',
url: '/home',
icon: 'home',
detailTag: 'basicInfo'
},
{
title: 'Deportes',
url: '/deportes',
icon: 'american-football',
detailTag: 'basicInfo'
},
{
title: 'Citas',
url: '/citas',
icon: 'bowtie',
detailTag: 'basicInfo'
},
{
title: 'Bares',
url: '/bares',
icon: 'beer',
detailTag: 'basicInfo'
},
{
title: 'Comida',
url: '/comida',
icon: 'pizza',
detailTag: 'basicInfo'
},
{
title: 'Lugares turisticos',
url: '/lugares-turisticos',
icon: 'airplane',
detailTag: 'basicInfo'
},
{
title: 'Otros',
url: '/',
icon: 'disc',
detailTag: 'basicInfo'
},
{
title: 'Cambiar de cuenta',
url: '/log-in',
icon: 'browsers',
detailTag: 'accountInfo'
},
{
title: 'Configuración',
url: '/account-config',
icon: 'build',
detailTag: 'accountInfo'
},
{
title: 'Salir',
url: '/',
icon: 'exit',
detailTag: 'accountInfo'
}
];
constructor(){}
}
И, например, в home.page.ts я пытаюсь импортировать его:
import { AppPages } from '../global_modules/app_pages';
Теперь, когда я импортировал модуль, я создаю переменную внутри класса HomePage, например:
public appPages;
Полный код home.page.ts:
import { Component } from '@angular/core';
import { BackgroundDirective } from '../../assets/background.directive';/*This directive is needed in each page*/
import { ToastController } from '@ionic/angular';
import { AppPages } from '../../global_modules/app_pages';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
public gallery_main_route = '../assets/gallery/';
public appPages;
public galleryRadioButtons;
public top_bar_avatar;
public left_bar_menu_opener;
public menuCtrl;
public gallery_images = [
{
name: 'sample',
extension: '.jpg',
sample_gallery_text: '',
alt: '',
checked: 'true'
},
{
name: 'sample2',
extension: '.jpg',
sample_gallery_text: '',
alt: '',
checked: 'false'
},
{
name: 'sample3',
extension: '.jpg',
sample_gallery_text: '',
alt: '',
checked: 'false'
},
{
name: 'sample4',
extension: '.jpg',
sample_gallery_text: '',
alt: '',
checked: 'false'
},
{
name: 'sample5',
extension: '.png',
sample_gallery_text: '',
alt: '',
checked: 'false'
}
];
public sample_content = [
{
separator_title: 'Restaurantes',
title: 'Restaurante x',
src: '../assets/gallery/sample3.jpg',
description: '¿Un lugar donde comer un platillo exquisito y ademas muy elegante?, suena tentador...',
loved: 'heart-empty',
favourite: 'star-outline'
},
{
separator_title: 'Bares',
title: 'Bar x',
src: '../assets/gallery/sample4.jpg',
description: '¿Quieres compartir alguna cerveza con alguien pero no tienes amigos?, con EXTIME, podrás hacerlo!',
loved: 'heart-empty',
favourite: 'star-outline'
},
{
separator_title: 'Citas',
title: 'Cita x',
src: '../assets/gallery/sample2.jpg',
description: '¿Eres sociable y deseas conocer y salir con aquellas personas?, EXTIME te da un medio para hacerlo!',
loved: 'heart-empty',
favourite: 'star-outline'
},
{
separator_title: 'Lugares turisticos',
title: 'Lugar turistico x',
src: '../assets/gallery/sample.jpg',
description: '¿Que mas placentero que ir de vacaciones a un hermoso lugar?, encuentra los mejores lugares en EXTIME!',
loved: 'heart-empty',
favourite: 'star-outline'
},
{
separator_title: 'Lugares deportivos',
title: 'Lugar deportivo x',
src: '../assets/gallery/sample5.png',
description: '¿Disfrutas tambien de hacer ejercicio?, ¡Ningun problema!, aquí en EXTIME, tambien encontraras lugares deportivos de interes personal en los cuales hacer deporte.',
loved: 'heart-empty',
favourite: 'star-outline'
}
];
constructor(public toastController: ToastController){
this.appPages = AppPages.pages;
}
//This function allows you to add any event to an element, and you can attach a callback to that event and pass to it any needed parameters.
addEvents(element, evType, attachCallback, ...callbackAttributes){
element.addEventListener(evType, (ev) =>{
attachCallback(ev, ...callbackAttributes);
});
}
setup(){
this.appPages = AppPages.pages;
this.galleryRadioButtons = document.getElementsByClassName('circle_slider_component') as HTMLCollectionOf<HTMLElement>;
this.top_bar_avatar = document.getElementById('top_right_avatar');
this.left_bar_menu_opener = document.getElementById("title_component").children[0];
this.menuCtrl = document.querySelector('ion-menu-controller');
console.log(this.appPages);
//Adding menu custom display events.
this.addEvents(this.top_bar_avatar, "click", this.hideShowMenu, "item-container","accountInfo");
this.addEvents(this.left_bar_menu_opener, "click", this.hideShowMenu, "item-container", "basicInfo");
}
hideShowMenu(ev, elementClassReference,listReference){
const elements = document.getElementsByClassName(elementClassReference);
for(let i = 0; i < elements.length; i++){
if(!(this.appPages[i].detailTag === listReference)){
elements[i].style.display = "none";
}else{
elements[i].style.display = "block";
}
}
this.menuCtrl.open();
}
ionViewDidEnter(){
this.setup();
}
async button_toast(message, index){
switch(message){
case 'loved':
if(this.sample_content[index].loved == "heart-empty"){
this.sample_content[index].loved = "heart";
const toast = await this.toastController.create({
message: '¡Haz indicado que te gusta esta pagina!',
duration: 2000
});
return await toast.present();
}else{
this.sample_content[index].loved = "heart-empty";
const toast = await this.toastController.create({
message: '¡Ya no te gusta esta pagina!',
duration: 2000
});
return await toast.present();
}
break;
case 'favourite':
if(this.sample_content[index].favourite == "star-outline"){
this.sample_content[index].favourite = "star";
const toast = await this.toastController.create({
message: '¡Haz añadido esta pagina a favoritos!',
duration: 2000
});
return await toast.present();
}else{
this.sample_content[index].favourite = "star-outline";
const toast = await this.toastController.create({
message: '¡Haz quitado esta pagina de favoritos!',
duration: 2000
});
return await toast.present();
}
break;
}
}
}
Когда я console.log указывает значение переменной appPages в настройке после назначения, я получаю правильную информацию (не определена), но когда другая функция пытается получить содержимое этой переменной, выдает мне эту ошибку:
core.js: 15724 ОШИБКА TypeError: Невозможно прочитать свойство 'appPages' из неопределенного
при нажатии ../ src / app / home / home.page.ts.HomePage.hideShowMenu (home.page.ts: 144)
на HTMLElement. (home.page.ts: 118)
в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 423)
в Object.onInvokeTask (core.js: 17290)
в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (zone.js: 422)
в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (zone.js: 195)
в ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask [as invoke] (zone.js: 498)
в invokeTask (zone.js: 1744)
в HTMLElement.globalZoneAwareCallback (zone.js: 1770)
¿Почему «не назначено»? (Учтите, что когда я console.log содержит содержимое переменной appPages, я получаю правильную информацию, а не неопределенную).