两个组件Angular 4之间的数据[重复]答案

【问题标题】：data between two components Angular 4 [duplicate]两个组件Angular 4之间的数据[重复]
【发布时间】：2018-06-19 00:40:46
【问题描述】：

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

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

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

1st -> 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() {
    }


}

【问题讨论】：

如果要在父子组件之间共享数据，请使用@Input()，否则使用服务在组件之间共享数据。在您的情况下，单击“查看/编辑”按钮获取数据并存储在服务中，当您路由到学生组件时，使用 ngOnInit() 从服务中填充数据
我可以有一项服务来获取所有学生的名单。但是，当我点击 sview 按钮时，如何仅获取特定学生的详细信息？
在同一服务中单击“查看/编辑”按钮有一个方法 setStudentData() ，您可以在其中传递您获得的学生的数据并将其存储在变量中，然后使用检索学生数据另一种方法 getStudentData() 可以在学生组件的 ngOnInit() 中使用。
你能给我举个例子吗
添加为答案，因为在评论中很难有相同的内容

标签： angular components routerlink

【解决方案1】：

在您的 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;
}

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

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

【讨论】：

感谢您的清晰解释
但是，当我使用此服务并重新加载详细学生页面时，我得到了空数组。我将如何处理这种情况？
能不能分享一下你在stackblitz做的工作，调试起来会很方便

【解决方案2】：

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

在这里

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>

【讨论】：