我用angular 7做一个Web应用程序项目。我遇到一个问题,路由器导航无法使用this.router.navigate([/ home / fetch-data])路由到子组件。
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { CounterComponent } from './counter/counter.component';
import { HomeComponent } from './components/home/home.component';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
data: { bc: "NAVI.HOME" },
children: [
{
path: 'fetch-data',
component: FetchDataComponent,
data: { bc: "VEHICLE.DETAILS" }
}
]
},
{
path: 'counter',
component: CounterComponent,
data: { bc: "Counter" }
},
// {
// path: 'home/fetch-data',
// component: FetchDataComponent,
// data: { bc: "Home > Counter" }
// },
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
}
];
@NgModule({
declarations: [],
imports: [
RouterModule.forRoot(routes),
CommonModule,
],
exports: [RouterModule]
})
export class AppRoutingModule { }
,搜索组件将触发一个函数:
public naviTo(): void {
this.vehicleService.getVehicleByVin(this.vehicle.vin);
this.router.navigate(['../../home/fetch-data']);
this.messageService.sendMessage("VehicleData");
}
和app.component.html
<mat-sidenav-container class="mat-sidenav-container" autosize>
<mat-sidenav mode="side" class="mat-sidenav" opened>
<app-side-nav></app-side-nav>
</mat-sidenav>
<mat-sidenav-content>
<div class="app-header">
<app-header></app-header>
</div>
<div class="mat-sidenav-content">
<main class="content">
<app-breadcrumb></app-breadcrumb>
<router-outlet></router-outlet>
</main>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
所有这些都是相关的代码。 函数naviTo()在search.component中,并且此搜索组件是标头组件的子组件。 home.component由侧面导航。
根据漫游者的定义,人可以理解,获取数据组件是home的子组件,但在实现中并不是真正的父子关系。
问题在于它不会通过函数naviTo()路由到子组件。我尝试了很多可能性,但是没有用。 也许我已经通过了。
有解决方案吗?
最诚挚的问候,
狮子座
答案 0 :(得分:0)
在这里,您只需要./
相对于家庭组件(父组件)即可。
解决方案:
public naviTo(): void {
this.vehicleService.getVehicleByVin(this.vehicle.vin);
this.router.navigate(['./fetch-data']);
this.messageService.sendMessage("VehicleData");
}
希望获得帮助!