在Angular和Ionic中,可以使用路由来实现不同页面之间的导航和跳转。下面是一个示例,演示了如何在Angular和Ionic中使用路由。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HomePage } from './home/home.page';
import { AboutPage } from './about/about.page';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomePage
},
{
path: 'about',
component: AboutPage
}
];
@NgModule({
declarations: [AppComponent, HomePage, AboutPage],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
RouterModule.forRoot(routes)
],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
constructor(private router: Router) {}
goToAbout() {
this.router.navigate(['/about']);
}
}
Home Page
Go to About page
import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-about',
templateUrl: 'about.page.html',
styleUrls: ['about.page.scss'],
})
export class AboutPage {
constructor(private router: Router) {}
goBack() {
this.router.navigate(['/home']);
}
}
About Page
This is the About page.
这样就可以在Angular和Ionic中使用路由实现页面之间的导航和跳转了。在HomePage中使用this.router.navigate(['/about'])
导航到AboutPage,AboutPage中使用this.router.navigate(['/home'])
返回到HomePage。