3

我有一个从网络服务获得的学校列表和一个仪表板页面，我想要的是当用户单击特定学校时打开仪表板页面，但它会获取有关所选学校的数据，所以它的类型保存学校的 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>

学校名单 ts：

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 来测试

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

4

1 回答 1

0

我会写下这个答案，以便您在阅读我的评论后关闭您的问题（当然如果解决了）：

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

PostMessage 示例

从父窗口：window.postMessage(myMessage)

从子窗口：ngAfterViewInit(): void { window.addEventListener('message', event => { // do what you want }

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

希望能帮助到你

于 2018-02-07T13:17:35.823 回答