嗨,我在路由到Ionic的某些页面时遇到了一些问题。我正在尝试创建一个标题组件,该组件将具有一个链接到不同页面的侧菜单。但是我也希望能够在某些页面上关闭页眉。我可以在媒体页面上看到标题组件,但是routerLink不起作用。这是我的代码;
header-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HeaderComponent } from './header.component';
const routes: Routes = [
{
path: '',
component: HeaderComponent
},
{
path: 'home',
loadChildren: '../../../pages/landing/home/home.module#HomePageModule'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class HeaderRoutingModule {}
header.component.html
<ion-header>
<ion-toolbar class="toolbar">
<ion-buttons slot="secondary">
<ion-button>
<ion-icon slot="icon-only" name="person-circle"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="primary">
<ion-button color="danger">
<ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="start">
<ion-button routerLink="/home">Home</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
component.module.ts
import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { HeaderComponent } from './header/header.component';
@NgModule({
imports: [
IonicModule,
CommonModule,
ReactiveFormsModule,
FormsModule
],
declarations: [
HeaderComponent
],
exports: [
HeaderComponent
]
})
export class PageComponentsModule { }
media.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { MediaPageRoutingModule } from './media-routing.module';
import { MediaPage } from './media.page';
import { PageComponentsModule } from '../components/page-component.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
PageComponentsModule,
MediaPageRoutingModule
],
declarations: [MediaPage]
})
export class MediaPageModule {}
提前感谢!
我曾经使用过这种方法,有一个类似的情况,这就是我修复它的方式。这可能不是最佳做法,所以如果有更多扎根经验的人卖得更多,我也想学习。
<ion-button (click)="onHomeRoute()">Home</ion-button>
进口
"import { Router } from '@angular/router';"
构造函数
(private router: Router)
然后我将在[click event]中添加this.router.navigate(['/home']);
这样,
onHomeRoute(){
this.router.navigate(['/home'])
}
我希望这也会对您有所帮助,就像我说的,如果有人有更好的解决方案,请发表评论,我也想知道。干杯。