📅  最后修改于: 2023-12-03 15:11:25.265000             🧑  作者: Mango
离子是一个基于 Angular 的强大的 UI 组件库,它提供了许多易用且美观的 UI 组件,适用于构建高质量的 Web 和移动应用程序。
在你的页面工程中,使用 ionic generate page
命令即可创建一个新页面。
ionic generate page new-page
这个命令将自动生成一个名为 new-page
的页面组件,它包含了一个 HTML 模板、一个 CSS 样式表和一个 TypeScript 文件。
在你的路由配置文件(通常是 app-routing.module.ts
)中,添加一个新的路由,将其与新页面组件关联起来。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NewPage } from './new-page/new-page';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomePage },
{ path: 'new-page', component: NewPage },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
使用 Angular 的 Router
服务可以在组件中进行路由导航。
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) {}
navigateToNewPage() {
this.router.navigate(['/new-page']);
}
}
以上就是在 Ionic 中创建新页面的简单教程。
ionic generate page
命令创建一个新页面组件。Router
服务进行路由导航。Happy coding!