第一種方法（傳單個或者多個參數）：
主頁面方法：
先添加引用：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);