将动态数据从一条路线发送到另一条路线

Question

我想从学生/我的学生路线发送数据到学生/学生简介/：id都属于不同的模块，这是学生登录后模块的子模块。

在my-students.html中

<div *ngFor="student of students">
<a (click)="goToStudentProfile(student)"> student name </a>
</div>

我-students.ts

goToStudentProfile（学生）{

  let studentData = { "firstName": student.firstname,
    "phone": student.phone,
    "email": student.email,
    "birthdate": student.birth_date
    }

  this.studentsService.studentBasicInfo = []
  this.studentsService.studentBasicInfo.push(studentData );
this.router.navigate(['students/student-profile/student.student_id'])

}

在studentsService中，我将studentBasicInfo公共字段声明为

studentBasicInfo = [];

学生档案组成部分：

ngOnInit()
{
 console.log("studentBasicInfo", this.studentsService.studentBasicInfo) 
}

//Output: studentBasicInfo  undefined

我也尝试使用了behaviorSubject，但可能两个组件都来自不同的模块，因此也无法正常工作。

我有什么想法可以解决这个问题吗？

更新我也尝试过：

我-students.component.ts

this.studentsService.setData(studentsData)

服务：

studentData = new BehaviorSubject<any>(null)
studentData$ = this.studentData.asObservable();
setData(data)
{
    this.studentData.next(data)
}

学生profile.component.ts

ngOnInit(){

this.studentService.studentData$.subscribe(

data=>
{
  console.log("subscribed",data)
})
}

//Output subscribed

解释我的情景：stackblits但遗憾的是，由于依赖问题，它无法正常工作。

更新：Aniket avhad的这部分答案解决了我的问题：

为了使两个组件在多个组件之间共享服务，您应该提供更高级别的服务，而不是将服务添加到两个组件的提供者。

Answer 1

好的，这是你的解决方案，你的rxjs BehaviorSubject也会起作用，只有你必须这样做是添加服务，你初始化rxjs studentData并将该服务添加到主模块提供程序中。

为了使两个组件在多个组件之间共享服务，您应该提供更高级别的服务，而不是将服务添加到两个组件的提供者。

现在检查我的解决方案，

首先创建common.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CommonService {

  studentData = new BehaviorSubject<any>(null)
  studentData$ = this.studentData.asObservable();

  constructor() { }

}

在app.component.ts

export class AppComponent {
  name = 'Angular';

  constructor(private router: Router, private commonService: CommonService) { }

  ngOnInit() {
  }

  students = [
    { id: 1, name: 'student1' },
    { id: 2, name: 'student4' },
    { id: 3, name: 'student3' },
    { id: 4, name: 'student2' }

  ];

  goToStudentProfile(student) {
    let studentData = {
      "firstName": student.name,
      "id": student.id,
    }

    this.commonService.studentData.next(studentData);
    this.router.navigate([`student/${student.id}`]);
  }
}

在child.component，即你的学生

ngOnInit() {
    this.commonService.studentData$.subscribe(res => {
      console.log(res);
    });
  }

Z zxswい但是

Answer 2

问题是您只在组件初始化时输出数据。尝试使用RxJS订阅数据更改。

 Stackblitz

你的组件：

export class studentsService {
  dataUpdated:EventEmitter = new EventEmitter();

  setData(data) {
    this.data = data;
    this.dataUpdated.emit(this.data);
  }
}

Answer 3

您也可以尝试使用RXJS BehaviorSubject。

服务：

ngOnInit() {
    this._studentsService.dataUpdated.subscribe(
      (data) => {
        console.log(data);
      }
    );
  }

Answer 4

你能试试吗

export class studentsService {
  private transferData = new BehaviorSubject<any>('');
  public transferData$ = this.transferData.asObservable();

  setData(data) {
    this.data = data;
    this.transferData.next(this.data);
  }
}

**In your Component**

 ngOnInit() {
    setTimeout(()=>{
    this._studentsService.transferData$.subscribe(
      (data) => {
        console.log(data);
      }
    );
    }, 500);
  }

然后使用ActivatedRoute在目标模块上获取您的ID。

<div *ngFor="student of students">
<button mat-raised-button color="primary" class="btn btn-secondary" routerLink="/students/student-profile/{{student.id}}"> Update User</button>
</div>