Ionic framework 离子5,角度-侧菜单中的链接不可单击
我有一个奇怪的问题-但我是新来的离子,所以可能会错过一些东西。我使用离子5和angular并实现ngxs。我在我的页面底部有一些标签,上面有运行良好的路由。如果我单击选项卡菜单中的某个项目,它将带我进入页面。我还添加了一个侧菜单,但其中没有一个项目是可点击的。我希望有人能看到一些明显的我遗漏的东西。附加生成的HTML的图像 in-app-routing.module.tsIonic framework 离子5,角度-侧菜单中的链接不可单击,ionic-framework,Ionic Framework,我有一个奇怪的问题-但我是新来的离子,所以可能会错过一些东西。我使用离子5和angular并实现ngxs。我在我的页面底部有一些标签,上面有运行良好的路由。如果我单击选项卡菜单中的某个项目,它将带我进入页面。我还添加了一个侧菜单,但其中没有一个项目是可点击的。我希望有人能看到一些明显的我遗漏的东西。附加生成的HTML的图像 in-app-routing.module.ts import { NgModule } from '@angular/core'; import { Prel
import { NgModule } from '@angular/core';
import {
PreloadAllModules,
RouterModule,
Routes,
} from '@angular/router';
import { PagesModule } from '../pages/pages.module';
const routes: Routes = [
{
path: '',
loadChildren: (): any => import('./../pages/pages.module').then((m: {PagesModule: PagesModule}) => m.PagesModule),
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
}),
],
exports: [
RouterModule,
],
})
export class AppRoutingModule {
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutPage } from './about/about.page';
import { ContactPage } from './contact/contact.page';
import { FaqPage } from './faq/faq.page';
import { TabsPage } from './tabs/tabs.page';
import { BlogPage } from './blog/blog.page';
const routes: Routes = [
{
path: 'page',
component: TabsPage,
children: [
{
path: 'about',
component: AboutPage,
},
{
path: 'contact',
component: ContactPage,
},
{
path: 'faq',
component: FaqPage,
},
{
path: 'blog',
component: BlogPage,
},
],
},
{
path: '',
redirectTo: '/page/about',
pathMatch: 'full',
},
];
@NgModule({
imports: [
RouterModule.forChild(routes),
],
exports: [
RouterModule,
],
})
export class PagesRoutingModule {
}
在pages-routing.module.ts中
import { NgModule } from '@angular/core';
import {
PreloadAllModules,
RouterModule,
Routes,
} from '@angular/router';
import { PagesModule } from '../pages/pages.module';
const routes: Routes = [
{
path: '',
loadChildren: (): any => import('./../pages/pages.module').then((m: {PagesModule: PagesModule}) => m.PagesModule),
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules,
}),
],
exports: [
RouterModule,
],
})
export class AppRoutingModule {
}
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutPage } from './about/about.page';
import { ContactPage } from './contact/contact.page';
import { FaqPage } from './faq/faq.page';
import { TabsPage } from './tabs/tabs.page';
import { BlogPage } from './blog/blog.page';
const routes: Routes = [
{
path: 'page',
component: TabsPage,
children: [
{
path: 'about',
component: AboutPage,
},
{
path: 'contact',
component: ContactPage,
},
{
path: 'faq',
component: FaqPage,
},
{
path: 'blog',
component: BlogPage,
},
],
},
{
path: '',
redirectTo: '/page/about',
pathMatch: 'full',
},
];
@NgModule({
imports: [
RouterModule.forChild(routes),
],
exports: [
RouterModule,
],
})
export class PagesRoutingModule {
}
在app.component.html中
<ion-app>
<ion-menu side="start" menuId="first" contentId="main-menu">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Start Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="main-menu">
<ion-list>
<ion-item routerLink="/page/about" routerDirection="forward">About</ion-item>
<ion-item routerLink="/page/faq" routerDirection="forward">FAQ</ion-item>
<ion-item routerLink="/page/blog" routerDirection="forward">Blog</ion-item>
<ion-item routerLink="/page/contact" routerDirection="forward">Contact</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet></ion-router-outlet>
</ion-app>
开始菜单
关于
常见问题
博客
接触
HTML