angular - 角度组件路由到主页
问题描述
嗨,我在路由回 Ionic 中的某些页面时遇到了一些问题。我正在尝试创建一个标题组件,该组件将具有一个链接到不同页面的侧菜单。但我也希望能够关闭某些页面上的标题。我可以在我的媒体页面上看到标题组件,但 routerLink 不起作用。这是我的代码;
标头路由.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>
组件.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 { }
媒体模块.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 {}
提前致谢!
解决方案
我已经用我解决了这个问题,有一个类似的案例,这就是我修复它的方法。这可能不是最好的做法,所以如果任何有更多生根经验的人有更多的东西,我也想学习。
- 我将删除 routerLink 并添加(单击)事件
<ion-button (click)="onHomeRoute()">Home</ion-button>
- 然后在控制器内部我会:
进口
"import { Router } from '@angular/router';"
构造函数
(private router: Router)
然后我会this.router.navigate(['/home']);
像这样在我的点击事件中添加,
onHomeRoute(){
this.router.navigate(['/home'])
}
我希望这也能对您有所帮助,就像我说的,如果有人有更好的解决方案,请发表评论,我也想知道。干杯。
推荐阅读
- php - 使用 vim 有效地重新格式化关联数组
- android - BufferedWriter 在一段时间后停止写入
- javascript - 当用户在文档上移动手指时移动图像
- java - 由于未找到视图而导致应用程序崩溃
- android - MediaStore.Images.Media.insertImage 不会保存图像
- excel - 在python中用csvwriter写一个单元格或一行
- variables - 在 SSIS 中将时间捕获并存储为字符串
- android - 在 Termux Android 上连接到 MariaDB 服务器
- xml - 如何使用 Golang 在 XML 中获取更深层次元素的元素名称
- c# - 在 Bamboo 上使用 MSBuild 构建解决方案时遇到问题