Question

我在ionic中创建了一个标签项目，并为About页面和Home页面创建了深层链接。我需要设置名称，但在设置名称时会出现以下结果：

问题1：网址不显示名称。

问题2：当我使用给定网址刷新页面时，标签也会消失。

在tabs.html中，我设置了<ion-tabs name="tabspage">

tabs.ts

import { Component } from '@angular/core';
import { ContactPage } from '../contact/contact';

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

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

  constructor() {

  }
}

tabs.html

 <ion-tabs name="tabshome">
      <ion-tab [root]="tab1Root" tabUrlPath="tab1" tabTitle="Home" tabIcon="home"></ion-tab>
      <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
      <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
    </ion-tabs>

about.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';


@IonicPage({
  segment: 'about/:id'
})

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

  constructor(public navCtrl: NavController) {

  }

}

home.ts

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

@IonicPage({
  segment: 'home'
})
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

我的git hub链接是https://github.com/jainAdijain/myTabs.git

Answer 1

需要更改GIT_WORK_TREE并使用标签进行深层链接：

tabs.ts

需要更改import { Component } from '@angular/core'; import { IonicPage } from 'ionic-angular'; import {ContactPage} from "../contact/contact"; @IonicPage({ name: 'page-tabs', priority: 'high'}) @Component({ selector: 'page-tabs', templateUrl: 'tabs.html', }) export class TabsPage { tab1Root='page-home'; tab2Root = 'page-about'; tab3Root = ContactPage; constructor() { } }

app.component.ts

import { Component } from '@angular/core'; import { Platform } from 'ionic-angular'; import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; @Component({ templateUrl: 'app.html' }) export class MyApp { rootPage:any ='page-tabs'; constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) { platform.ready().then(() => { // Okay, so the platform is ready and our plugins are available. // Here you can do any higher level native things you might need. statusBar.styleDefault(); splashScreen.hide(); }); } }保持不变。

需要更改tabs.html

about.ts

需要更改import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; @IonicPage({ segment: 'about/:id', name: 'page-about' }) @Component({ selector: 'page-about', templateUrl: 'about.html', }) export class AboutPage { constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewDidLoad() { console.log('ionViewDidLoad AboutPage'); } }

home.ts

还需要更新import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; @IonicPage({ segment: 'home', name: 'page-home' }) @Component({ selector: 'page-home', templateUrl: 'home.html', }) export class HomePage { constructor(public navCtrl: NavController, public navParams: NavParams) { } ionViewWillEnter() { } }

app.module.ts

name属性不在离子选项卡中

1 个答案: