代码之家 › 专栏 › 技术社区 › Always_a_learner

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

angular-routing angular

Always_a_learner · 技术社区 · 6 年前

我想将数据从students/my students route发送到students/student profile/:id

在我的-学生.html

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

我的-学生.ts

{

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

}

在我已将studentBasicInfo公共领域声明为

studentBasicInfo = [];

学生档案组件:

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

//Output: studentBasicInfo  undefined

有什么办法可以解决这个问题吗?

我也尝试过:

this.studentsService.setData(studentsData)

服务:

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

ngOnInit(){

this.studentService.studentData$.subscribe(

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

//Output subscribed

stackblits 但不幸的是,由于依赖性问题,它无法工作。

更新: 这部分答案来自 阿尼基特·阿夫哈德

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

4 回复 | 直到 6 年前

Aniket Avhad 6 年前

行为主体 并将该服务添加到主模块中 供应商 .

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

现在看看我的解决方案,

首先创建 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 i、 e.你的学生

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

Stackblitz

Alexander Yuvkovetskyi 6 年前

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

Suresh Kumar Ariya 6 年前

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

masera ngelekanyo 6 年前

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