Angular 如何保存项目的id以在下一页显示特定数据（第4页）

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

我想知道我怎样才能在第四节做到这一点

这是你需要的所有代码

学校列表组件的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>

仪表板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>

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

这是一个学校的api

如果您在postman上打开它，您将看到需要id才能从单个学校获取数据，您可以将1写入测试

---

如果有不清楚的地方或您需要特定的代码，请告诉我，我将向您提供您需要的任何详细信息。我将写下此答案，以便您在阅读我的评论后结束您的问题（当然，如果问题已解决）：

---

您可以通过两种简单的方式来完成：使用globalVariable或使用到下一页的postMessage

PostMessage示例

从父窗口：

window.postMessage（myMessage）

从子窗口：

ngAfterViewInit（）：void{
addEventListener（'message'，event=>{//do you want}

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

---

希望它有帮助

你可以用两种简单的方法来做：使用全局变量或使用下一页的postMessage。这就是你想要做的吗？是的，这就是我想要的，但你能告诉我什么是postMessage吗？很有帮助吗？不，我把路由设置为routerLink=“/dashboard/{{school.id}”所以它保存了学校的id，但当我使用相同的方法在仪表板中单击任何内容时，它都不会保存id

<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>

export class DashBoardComponent implements OnInit {


constructor() {

}

ngOnInit(): void {

}

}