angular - 如何从项目中保存 id 以在下一页上显示特定数据( Angular 4)

Question

我有一个从 Web 服务获取的学校列表和一个仪表板页面，我想要的是当用户单击特定学校时打开仪表板页面，但它会获取有关所选学校的数据，所以它保存学校的 id 并在下一页(仪表板)中调用它以获取其中学校的数据，

我想知道如何在 Angular 4 中做到这一点

这是您需要的所有代码

学校列表组件的 html:

<div class="col-md-12 row" style="text-align: center;">
    <div class="icon1 school-background1" routerLink="/dashboard" 
name="school" *ngFor="let school of name">
      <h6 class="online-active" >&#9679; Active</h6>
      <img src="http://crm.easyschools.org/uploads/{{school.logo}}" 
alt="{{school.name}}">
      <h6  class="logo-desc"  name="name" >{{school.name}}</h6>
    </div>
  </div>

学校名单:

export class SchoolListComponent implements OnInit {
name: any[] = []; 
id: any[] = []; 
logo: any[] = []; 

constructor(private _http: HttpClient) { 
 this.schoolList();
}

ngOnInit(): void {
}
private schoolList() {
return 



 this._http.get('http://crm.easyschools.org/api/en/getschools/getSchools')
  .subscribe(school => {
    this.logo = school.logo;
    this.id = school.data;
    this.name = school.data;
     console.log(school.data);
  });
}
}

仪表板html组件

<div class="icon">
      <a routerLink="/aisattendanceteacher" style="color: black;">

      <img src="../../../../assets/Easy-school-
assets/svgs/Attendance.svg" >
      <p class="the-h4">Attendance</p>
      </a>
    </div>
    <div class="icon">
      <a routerLink="/aisgrades" style="color: black;">
        <img src="../../../../assets/Easy-school-
assets/svgs/Grades.svg" >
        <p class="the-h4">Grades</p>
      </a>
      </div>
      <div class="icon">
        <a routerLink="/transcript" style="color: black;">
          <img src="../../../../assets/Easy-school-
assets/svgs/Grades.svg" >
          <p class="the-h4">Transcripts</p>
        </a>
      </div>

仪表板 ts:

export class DashBoardComponent implements OnInit {


constructor() {

}

ngOnInit(): void {

}

}

例如，我点击了 x 学校，因此它导航到仪表板，同时将根据其 id 获取这所学校的数据

这是单个学校的api

http://crm.easyschools.org/api/en/getschools/singleSchool

在postman上打开会看到需要id才能从单个学校取一个数据，可以写1测试

如果有什么不清楚或者你想要一个特定的代码，请告诉我，我会更新你想要的任何细节

Answer 1

我会写下这个答案，让您在阅读我的评论后关闭您的问题(如果当然解决了):

您可以通过两种简单的方式做到这一点:使用 globalVariable 或使用 postMessage 到下一页。

PostMessage 示例

来自父窗口:window.postMessage(myMessage)

从子窗口:ngAfterViewInit(): void { window.addEventListener('message', event => {//做你想做的事 }

请记住，Cross Origin 消息需要指定来源，但您会在这里找到所需的一切:developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

希望对你有帮助