angular - 在子组件中使用 Angular 导航 Ionic 5
问题描述
我设置了一个项目,其中有一个主页,其中显示了不同的组件。但是,当我尝试使用子组件内的按钮进行导航时,该按钮无法导航。想要的效果是这样的:
登录 --> 主/子 --> 其他页面
其中导航按钮位于子组件内,而不是组件所在的页面。
HTML
login.page.html
<ion-header>
<ion-toolbar>
<ion-title>login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button routerLink='/main/child1'>Login</ion-button>
</ion-content>
main.page.html
<ion-content>
<span> <!-- this span is a menu -->
<ion-button routerLink="/main/profile">Profile</ion-button>
<ion-button routerLink="/main/child1">Child 1</ion-button>
<ion-button routerLink="/main/child2">Child 2</ion-button>
</span>
<router-outlet></router-outlet>
<ion-button routerLink="/other-page">Other Page</ion-button>
<!-- Navigates Properly but not wanted here-->
</ion-content>
child1.component.html
<ion-content>
Child 1
<ion-button routerLink='/other-page'>Other Page</ion-button>
<!-- Navigation Doesn't Work-->
</ion-content>
路由模块
应用程序路由.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'login',
loadChildren: () => import('./pages/login/login.module').then( m => m.LoginPageModule)
},
{
path: 'main',
loadChildren: () => import('./pages/main/main.module').then( m => m.MainPageModule)
},
{
path: 'other-page',
loadChildren: () => import('./pages/other-page/other-page.module').then( m => m.OtherPagePageModule)
},
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule { }
登录路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPage } from './login.page';
const routes: Routes = [
{
path: '',
component: LoginPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LoginPageRoutingModule {}
主模块.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Child1Component } from 'src/app/components/child1/child1.component';
import { Child2Component } from 'src/app/components/child2/child2.component';
import { ProfileComponent } from 'src/app/components/profile/profile.component';
import { MainPage } from './main.page';
const routes: Routes = [
{
path: '',
redirectTo: 'main/child1',
pathMatch: 'full'
},
{
path: '',
component: MainPage,
children: [
{
path: 'child1',
component: Child1Component
},
{
path: 'child2',
component: Child2Component
},
{
path: 'profile',
component: ProfileComponent
},
]
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class MainPageRoutingModule {}
其他路由.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OtherPagePage } from './other-page.page';
const routes: Routes = [
{
path: '',
component: OtherPagePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class OtherPageRoutingModule {}
提前感谢所有提供帮助的人。
解决方案
推荐阅读
- reactjs - 样式化的组件不想在屏幕上呈现
- html - 更新ID后结果值与原值不同
- python - 如果变量通过某些测试,则断言变量具有某些属性
- sql - 如何修复“Impossible de résoudre le conflit de classement entre French_CL_AI et French_BIN”?
- python - Telebot InlineKeyboard URL 无提示
- python - networkx 图的边缘标签不显示在 PyQt 嵌入式 matplotlib 中
- android - Android studio Artic fox 无法创建构建
- html - 使用 XSL 将 XML 转换为 HTMl 时丢失的值
- postgresql - 在需要比较运算符的 WHERE 子句中选择 count(*)
- security - 为什么 ModSecurity 会阻止外部链接?