Angular 组件之间的传值
第一种方法（传单个或者多个参数）：
主页面方法：
先添加引用：private _routes: Router,
Details(PBSCode) {
this._routes.navigate(['pbs-manage/pbs-detail', PBSCode]);
}
路由：
// reuse: true 可以使本页面不关闭
{
path: 'pbs-detail/:PBSCode',
component: PBSDetailComponent,
data: { title: '详情', reuse: true }
}
子页面接收：
ngOnInit() {
this.route.queryParams.subscribe((e) => {
this.PBSCode= e.get('PBSCode');
});
}
缺点：该方法会把参数显示在地址栏上
第二个方法（传对象）：
主页面: private _routes: Router,
添加引用：
Details(bb,cc) {
this.router.navigate(['/workOrder-manage/challenge-list'], { queryParams: { aa: bb, cc: dd } });
}
子页面：
ngOnInit() {
this.route.queryParams.subscribe((e) => {
this.aa= e.aa;
this.cc = e.cc ;
});
}
备注：该方式与第一个方法的缺点一致,好处是不用配置路由
第三种方式（模态窗）
// 补充信息
主页面方法：
// componentParams中的是传的值 content是子页面的名字
EditCarrier(ContractID) {
const options = {
wrapClassName: 'modal-lg custom-modal',
content: PublicContractEditCarrierComponent,
footer: false,
componentParams: {
ContractID: ContractID
}
};
// 子页面关闭触发的事件
this.modal.open(options).subscribe(result => {
if (result === 'onDestroy') {
this.GetDatas(0);
}
});
}
子页面接收：
@Input()
set dataci(ci: number) {
this.ContractID = ci;
}
备注：主页面的传值参数名与子页面接收的参数名必须一致
第四中：
主页面：
html:
//子页面的组件名字
<app-back-admin-assessment-early-warning-index (receive)="GetParameters($event)"></app-back-admin-assessment-early-warning-index>
ts页面：
GetParameters(e) {
console.log(e);
}
子页面：
// receive这个名字随意 但主页的触发方法的名字要与这里的名字一致
@Output('receive') checkedBack = new EventEmitter<any>();
//触发这个方法就可以传值到主页面
this.checkedBack.emit(this.params);
