1

我安装了 Ionic 4 的 RC 版本。

npm i -g ionic@rc
ionic start MyApp

选择带有标签的模板。

生成后，我新建一个页面：

ionic g page welcome

在主页上，调用WelcomePage

<ion-header>
  <ion-toolbar>
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  The world is your oyster.
  <p>If you get lost, the <a target="_blank" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
  <ion-button href='/welcome'>GoToWelcome</ion-button>
</ion-content>

从WelcomePage，调用HomePage（它是标签的出口）

<ion-header>
  <ion-toolbar>
    <ion-title>welcome</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button href='/tabs/(home:home)'>GoToHome</ion-button>
</ion-content>

这是app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [ 
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
  { path: 'welcome', loadChildren: './pages/welcome/welcome.module#WelcomePageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

让我们测试一下： ionic serve

在我单击按钮GoToWelcome并单击GoToHome. 选项卡按钮（关于、联系...）不再起作用。呼叫出口不同吗？

4

0 回答 0