Question

我想将数据从学生/我的学生路线发送到学生/学生资料/：id 两者都属于不同的模块，它们是学生登录后模块的子模块。

在my-students.html

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

my-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尝试了此操作，但是可能两个组件都来自不同的模块，所以也无法正常工作。

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

更新 我也尝试过：

my-students.component.ts

this.studentsService.setData(studentsData)

服务：

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

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

Stackblitz演示

Answer 2

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

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

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

以及您的组件：

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

Answer 3

您也可以尝试使用RXJS BehaviorSubject。

服务：

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

Answer 4

可以请您尝试一下。

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

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

import { ActivatedRoute} from '@angular/router'; 

    constructor( route: ActivatedRoute) {
        var userId = route.snapshot.params['id'];
       }

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

4 个答案: