Angular 路由与 ionic 路由

标签 angular ionic2 angular2-routing

我是 ionic2 的新手。与纯 Angular 路由相比,它的路由有些奇怪。在 Angular 中:

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
imports: [
  RouterModule.forRoot(appRoutes)
  // other imports here
],

我们传递一个类型为Routes 的常量。

在 Ionic(sidemenu starter)中,他们将组件传递给 forRoot 函数。

import { MyApp } from './app.component';
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
],

有什么想法吗?

最佳答案

编辑:

Ionic 4 还在后台使用标准 Angular 路径。推送和弹出不再是 ionic 方式,here是一本关于将 Angular 路由器与 ionic 结合使用的好书。

原答案:

Ionic 不支持 URL 路由,而是实现了自定义导航解决方案 - NavController (由 suraj 链接)。 NavController 维护一个页面堆栈 - 向前移动你将一个页面推送到堆栈 this.nav.push(Page1); 并向后移动你弹出它 this.navCtrl.pop();。 通过这种方式,您在浏览器中的 url 始终相同,并且应用程序始终在主页上打开 - 这类似于移动应用程序的行为。要启用对特定资源的直接访问(就像打开 url myapp/items/1 一样),您必须使用 deep linking plugin .

关于 Angular 路由与 ionic 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44055876/

相关文章:

javascript - 无法使用排序库 ng2-dnd 对几个不同的列表进行排序

javascript - 无法将数据发送到 API 服务器 'Error trying to diff ' [对象对象 ]'. Only arrays and iterables are allowed'

java - 预检响应在 Angular 4 和 Spring Boot (RestAPI) 应用程序中具有无效的 HTTP 状态代码 403

angular - 如何使用 typescript 禁用 ionic 选择。 ionic 2

angular - Ionic 2 - 如何仅删除登录页面上的拆分面板?

node.js - 从 angular2 到 nodejs 预检请求的路由中出现错误未通过访问控制检查 : No 'Access-Control-Allow-Origin'

angular - NativeScript 预览问题

angular - 在 Angular4 中切换路由时防止重新加载组件

angular - Ionic2 添加自定义扩展方法

angular - 如何在页面刷新时重置路由器?