отправка динамических данных с одного маршрута на другой

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'])

}

В studentService У меня есть общедоступное поле studentBasicInfo, объявленное как

studentBasicInfo = [];

компонент профиля студента:

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

//Output: studentBasicInfo  undefined

Я пытался сделать это и с поведением поведения субъекта, но, возможно, оба компонента принадлежат разным модулям, поэтому он также не работает.

Есть идеи, как я могу это исправить?

UPDATE Я также пробовал:

мой-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 Но, к сожалению, это не работает из-за проблемы с зависимостями.

UPDATE: Эта часть ответа от Аникет Авхад решила мою проблему:

Чтобы два сервиса совместно использовали несколько компонентов, вам следует предоставлять услугу на более высоком уровне и не добавлять услугу в поставщики обоих компонентов.

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

пожалуйста, попробуйте это.

<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, чтобы получить свой идентификатор в модуле назначения.

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

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

Answer 4

Проблема в том, что вы выводите данные только при инициализации компонента. Попробуйте использовать 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);
      }
    );
  }