在Angular 6中,你可以使用路由参数来将数据从导航头传递到路由组件。以下是一个示例解决方法:
在导航头组件的类文件中,定义navigateWithData
方法:
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
@Injectable()
export class HeaderComponent {
constructor(private router: Router) { }
navigateWithData() {
const data = { name: 'John', age: 30 };
this.router.navigate(['/route-component'], { state: { data } });
}
}
RouteComponent
的路由组件,你可以在其类文件中使用ActivatedRoute
服务来获取传递的数据。例如:import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-route-component',
templateUrl: './route-component.component.html',
styleUrls: ['./route-component.component.css']
})
export class RouteComponent implements OnInit {
data: any;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.data = this.route.snapshot.state.data;
console.log(this.data);
}
}
在上述代码中,我们使用了ActivatedRoute
服务的snapshot
属性来获取传递的数据,然后将其赋值给data
属性。
AppRoutingModule
,你需要在该模块的路由配置中添加一个路径为route-component
的路由,以及对应的组件。例如:import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RouteComponent } from './route-component/route-component.component';
const routes: Routes = [
{ path: 'route-component', component: RouteComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在上述路由配置中,我们将route-component
路径与RouteComponent
组件关联起来。
这样,在导航头组件中点击按钮后,将会导航到RouteComponent
组件,并且传递的数据会在组件初始化时被打印出来。
希望这能帮助到你!