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