两个组件之间的数据 Angular 4

Question

您好，我在显示所有学生列表的页面中有一个 table 当我们单击 table 中的查看按钮时，它会转到显示详细信息的其他页面特定学生的。

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

当他们点击 'View/Edit' 按钮时，我如何发送数据到其他组件？

第 1 -> 学生-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() {
    }


}

Answer 1

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

在这里

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

@Injectable()
export class StudentService   {

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

  constructor() {}


}

将此服务注入到您的两个组件（如下所示）：

constructor(protected service : StudentService){}

并在组件 2（您的视图组件）中订阅 StudentService 的学生，如下所示 :

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

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

现在在组件 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>

Answer 2

在你的student-list.component.html中使用事件绑定调用你的student-list.component.ts中的方法您可以在其中更新服务的文件，然后路由到 student.component.ts

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

有一个存储学生数据的服务

xyz.service.ts

studentData = {};

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

getStudentData(){
 return this.studentData;
}

在你的学生-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
}

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

两个组件之间的数据 Angular 4

data between two components Angular 4

components

routerlink

angular