angular - 组件在离子标签模板中不起作用
问题描述
我刚开始使用 Ionic 和 Angular 我已经创建了一个基于选项卡模板的 ionic 应用程序。我使用添加一个组件
ionic g component rabat
当我将组件添加到路由文件时,它使我的应用程序变为空白(它不再显示在http://localhost:8100/中)
这是我的 app.routing.ts 文件:
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { RabatComponent } from './rabat/rabat.component';
const routes: Routes = [
{ path: 'rabat', component: RabatComponent },
{
path: '',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
},
{ path: 'tab4', loadChildren: './tab4/tab4.module#Tab4PageModule' },
{ path: 'tab5', loadChildren: './tab5/tab5.module#Tab5PageModule' },
{ path: 'tab6', loadChildren: './tab6/tab6.module#Tab6PageModule' },
{ path: 'tab7', loadChildren: './tab7/tab7.module#Tab7PageModule' },
{ path: 'tab8', loadChildren: './tab8/tab8.module#Tab8PageModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
我做错了什么?我刚开始使用这两种技术。
解决方案
当您自动生成 ionic tabs 应用程序时,您会得到一个名为“tabs.module.ts”的文件。该文件具有所有选项卡路由。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'tab1',
children: [
{
path: '',
loadChildren: () =>
import('../tab1/tab1.module').then(m => m.Tab1PageModule)
}
]
},
{
path: 'tab2',
children: [
{
path: '',
loadChildren: () =>
import('../tab2/tab2.module').then(m => m.Tab2PageModule)
}
]
},
{
path: 'tab3',
children: [
{
path: '',
loadChildren: () =>
import('../tab3/tab3.module').then(m => m.Tab3PageModule)
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/tab1',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
我的猜测是您自动生成了空白应用程序,其中有一个 app.routing.ts 文件,如下所示:
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
{ path: 'options', loadChildren: './options/options.module#OptionsPageModule' },
{ path: 'search', loadChildren: './search/search.module#SearchPageModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
推荐阅读
- reactjs - 我可以在状态对象上调用方法吗?我收到此错误 - this.state.stream.getTracks()[0].stop();
- laravel - 如何动态观察和设置变量?
- c# - 使用 Wix 安装程序安装时的条件检查先决条件
- c# - 如何将 CommandBar 添加到 NavigationView 标题?
- java - 如何使用 Rest Assured 在同一个 API 主体上发送 String[] 和 String 值?
- r - rmarkdown:Word doc 中的 kable、xtable 或 tab_df 表
- r - 如何根据另一个变量的值创建一个新变量?
- c# - 由元组组成的列表上的 Distinct 或 GroupBy
- powershell - 用于将所有磁盘和驱动器详细信息(包括安装点)以及名称、可用空间和容量导出到 CSV 文件的 PowerShell 脚本
- python - 无论如何我可以显示算法在查找元素时所遵循的路径