方法一:兄弟组件之间可以用服务进行交互
具体如下:
一、新建一个service.ts如下:
import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs';
import {Observable} from 'rxjs';
@Injectable({
provideIn: 'root'
})
export class ModalService {
private renderSubject: BehaviorSubject<any> = new BehaviorSubject<string>(null);
public getSubject(): Observable<any> {
return this.renderSubject;
}
public emitInfo(msg: any): void {
if (msg) {
this.renderSubject.next(msg)
}
}
constructor() {}
}
二、在module的providers加上该服务
providers: [ModalService]
三、组件一要发送内容给兄弟组件二
1、首先在ts中引入服务
import {ModalService} from ''
2、构造函数中注入
constructor(private modalService: ModalService) {}
3、用服务发送数据
sendId() {
this.modalService.emitInfo(this.detail);
}
四、组件二接收传过来的值
1、引入服务
import {ModalService} from ''
2、注入构造函数
constructor(private modalService: ModalService) {}
3、接收传过来的数据
this.modalService.getSubject().subscribe(res => {
})
方法二:还可以用路由传参
组件一要给组件二传参,组件一ts部分代码如下
1、引入Router
import {Router} from '@angular/router';
2、构造函数中注入Router
constructor(private router: Router) {}
3、在方法中传参
sendParam() {
this.router.navigate(['abc/info'],{
queryParams: {
id: this.infoId
}
});
}
组件二接收参数id
1、引入ActivatedRoute
import {ActivatedRoute} from '@angular/router';
2、构造函数中注入
constructor(private activatedRoute: ActivatedRoute) {}
3、获取参数
this.activatedRoute.queryParams.subscribe(param => {
this.id = res.id
})