Angular 组件在“离子选项卡”模板中不工作
我刚从离子型和角型开始 我已经创建了一个基于标签模板的ionic应用程序。 我使用Angular 组件在“离子选项卡”模板中不工作,angular,ionic-framework,Angular,Ionic Framework,我刚从离子型和角型开始 我已经创建了一个基于标签模板的ionic应用程序。 我使用 ionic g component rabat 当我将组件添加到路由文件时,它会使我的应用程序变为空白 (不再在中显示) 这是我的app.routing.ts文件: import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; import
ionic g component rabat
当我将组件添加到路由文件时,它会使我的应用程序变为空白
(不再在中显示)
这是我的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.Ruffux.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 { }