Как правильно установить root в моем основном приложении с вкладками в ionic 3? - PullRequest
Новая
       21

Как правильно установить root в моем основном приложении с вкладками в ionic 3?

0 голосов
/ 14 мая 2018

Привет, ребята, я только начинаю проект с помощью этой команды "ionic start helloWorld tabs", он генерирует проект с вкладками, затем я добавляю кнопку для перехода на новую страницу, у меня есть кнопка, которую я хочу вернуть в основное приложение., вот как я программирую кнопку новой страницы

newpage.ts 

  addItem(item: Item) {
    this.shopping.addItem(item).then(ref =>{
      this.navCtrl.setRoot('TabsPage', {key : ref.key});
    })
  }

после того, как я сохраняю элемент, я хотел бы вернуться к своим основным приложениям, я делаю setRoot длямой TabsPage, но я показываю мне эту ошибку

недействительная ссылка: TabsPage

здесь мои tabs.ts 

import { Component } from '@angular/core';

import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = HomePage;
  tab2Root = AboutPage;
  tab3Root = ContactPage;

  constructor() {

  }
}

что я пропустил здесь?я должен перейти к классу tabspage правильно?

ОБНОВЛЕНИЕ после того, как я обновил свой код @Yerkon ответом для второго варианта, я получил эти ошибки:

Ошибка: Uncaught (в обещании): Ошибка: Тип TabsPage является частьюобъявления 2-х модулей: AppModule и TabsPageModule!Пожалуйста, рассмотрите возможность перемещения TabsPage в модуль более высокого уровня, который импортирует AppModule и TabsPageModule.Вы также можете создать новый NgModule, который экспортирует и включает TabsPage, а затем импортировать этот NgModule в AppModule и TabsPageModule.Ошибка: Тип TabsPage является частью объявлений 2 модулей: AppModule и TabsPageModule!Пожалуйста, рассмотрите возможность перемещения TabsPage в модуль более высокого уровня, который импортирует AppModule и TabsPageModule.Вы также можете создать новый NgModule, который экспортирует и включает в себя TabsPage, а затем импортирует этот NgModule в AppModule и TabsPageModule.

он сказал, что мне нужно переместить мой tabpagemodule выше, нормально ли это делать?или я что-то пропустил?

1 Ответ

0 голосов
/ 14 мая 2018

недействительная ссылка: TabsPage

Эта ошибка выдается, потому что TabsPage не зарегистрирован в модуле.Есть два способа регистрации:

  1. Если страница загружена с нетерпением :

app.module.ts: 

@NgModule({
  declarations: [
    ConferenceApp,
    AboutPage,
    AccountPage,
    LoginPage,
    MapPage,
    PopoverPage,
    SchedulePage,
    ScheduleFilterPage,
    SessionDetailPage,
    SignupPage,
    SpeakerDetailPage,
    SpeakerListPage,
    TabsPage,
    TutorialPage,
    SupportPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(ConferenceApp, {}, {
      links: [
        { component: TabsPage, name: 'TabsPage', segment: 'tabs-page' },
         ...
      ]
    }),
    IonicStorageModule.forRoot()
  ],
...
Если страница будет ленивая загрузка .Здесь для каждой страницы вы создаете модуль.Совет: при использовании ионного CLI не нужно создавать страницы / page.modules вручную.Просто запустите: ionic g page TabsPage.Результат должен быть похож на:

tabs.module.ts: 

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { IonicPageModule } from 'ionic-angular';

import { TabsPage } from './tabs';

@NgModule({
  declarations: [
    TabsPage,
  ],
  imports: [
    IonicPageModule.forChild(TabsPage),

  ],
  exports: [
    TabsPage
  ]
})
export class TabsPageModule { }

tabs.ts: 

@IonicPage()
@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tab1Root: any = Tab1Root;
  tab2Root: any = Tab2Root;
  tab3Root: any = Tab3Root;
...
...