希望在父组件中点击列表item,根据item不同参数启动不同的子组件component 并传入不同的参数。
现在实验出两种等价方式
设置子组件路由app-routing.module.ts
const routes: Routes = [ {path: 'envelope', component: EnvelopeComponent }, ];
1 父组件
import { Router } from '@angular/router'; ...... export class AppComponent { constructor( private router: Router, ){} ...... onSelectedItem(event){ console.log('onSelectedItem', event.data) //this.uid_selected_from_table = event.data["uid"] //成绩详情跳转到别的路由 2种写法,接收时不同 //this.router.navigate(['/envelope'], {queryParams:event.data}) this.router.navigate(['/envelope', event.data]); } } }
2子组件
import {ActivatedRoute} from '@angular/router'; ..... export class EnvelopeComponent implements OnInit { constructor(private actived_route: ActivatedRoute) { // this.actived_route.queryParams.subscribe(d=>{ this.actived_route.params.subscribe(d=>{ console.log('参数', d) }) } }