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);

猜你喜欢

转载自www.cnblogs.com/yuanxinghuo/p/10191490.html