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

两个组件之间的数据角4[副本]

routerlink components angular

yer · 技术社区 · 7 年前

这个问题已经有了答案:

How to use home component data in other component? 1答

嗨,我在一个页面中有一个表,它显示所有学生的列表,当我们单击表中的“查看”按钮时,它会转到另一个页面,显示特定学生的详细信息。

学生列表是组件1,学生详细信息是组件2。

当他们单击“查看/编辑”按钮时,如何向其他组件发送数据?

第一个->student-list.component.ts

    import { Component, OnInit, Input } from '@angular/core';
    import { Router, ActivatedRoute, RouterModule } from '@angular/router';

    @Component({
      selector: 'app-student-list',
      templateUrl: './student-list.component.html',
      styleUrls: ['./student-list.component.scss']
    })
    export class StudentsListComponent implements OnInit {

      userData: any;
      selectedUser: any;

      constructor(public router: Router, public route: ActivatedRoute) { }

     ngOnInit() {
          this.getStudentList();
  }

  getStudentList() {
    this.http.get<Student>('*url*')
      .subscribe(data => {
        this.student = data;
      });
  }
    }

第二个->student.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute, RouterModule } from '@angular/router';

@Component({
  selector: 'app-student-selected',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.scss']
})
export class SelectedStudentComponent implements OnInit {


  constructor(public router: Router, public route: ActivatedRoute) { }

  ngOnInit() {
    }


}

2 回复 | 直到 7 年前

Avinash 7 年前

在你 student-list.component.html学生列表 使用事件绑定调用 学生列表.component.ts 文件,您可以在其中更新服务,然后路由到 student.component.ts学生组件

<button (click)="loadStudentData($event, studentId)">View/Edit</button>

让服务存储学生数据

XYZ服务

studentData = {};

setStudentData(data){
 this.studentData = data;
}

getStudentData(){
 return this.studentData;
}

在student-list.component.ts中导入服务

loadStudentData(e, studentId){
 //make a service call to get the data using the studentId
  this.service.setStudentData(data);
 //then route to student.component.ts
}

在student.component.ts中导入服务

private currentStuData = {};
ngOnInit(){
 //have a local variable to which you can assign the value from service 
  this.currentStuData = this.service.getStudentData();
 //use currentStuData in your template
}

在这里,我将您的数据视为一个对象,您可以根据要使用服务存储的数据类型来处理它。

Atul 7 年前

可以使用公共服务在组件之间共享学生数据。

这里是

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

@Injectable()
export class StudentService   {

  public student: BehaviorSubject<Object> = new BehaviorSubject<Object>(null);

  constructor() {}


}

将此服务注入两个组件(如下所示):

constructor(protected service : StudentService){}

并在组件2中订阅studentservice的student(用户视图组件),如下所示 :

//declare student and its subscription like below in component 2
public student : Object;
public studentSubscription : Subsription ;

public subscribeStudent(){
this.studentSubscription = this.service.student.subscribe(data => {
this.studnet = data;
});
}

//从构造函数或ngonit调用上面的方法

现在,在组件1中编写一个方法,当您单击如下视图时将调用该方法:

public viewStudent(student:any){
this.service.student.next(student);

  this.router.navigate( [
        'student',
         student[ 'id' ]
      ] );
}

组件1的HTML应该类似如下:

<div *ngFor = "let student of studentList">

<html to display row in first component....>
...  
<button type="button" (click)="viewStudent( student )">
                        View/Edit
 </button>
...
</div>