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

时间:2018-09-03 13:33:35

标签: angular angular-routing

我想将数据从学生/我的学生路线发送到学生/学生资料/: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 的这部分答案解决了我的问题:

  

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

4 个答案:

答案 0 :(得分: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演示

答案 1 :(得分:0)

问题是仅在组件初始化时才输出数据。尝试使用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);
      }
    );
  }

答案 2 :(得分:0)

您也可以尝试使用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);
  }

答案 3 :(得分:0)

可以请您尝试一下。

<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'];
       }