希望在父组件中点击列表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)
})
}
}