Question

我有一个学校列表，我从网络服务和仪表板页面获取，我想要的是当用户点击特定学校时打开仪表板页面但它将获取有关所选学校的数据，所以它可以保存学校的ID并在下一页（仪表板）中调用它来获取其中学校的数据，

我想知道我怎么能在角度4

中做到这一点

以下是您需要的所有代码

学校列表组件的HTML：

            <v-layout row>
                <v-flex xs4>
                    <v-subheader>editetext</v-subheader>
                </v-flex>
                <v-flex xs8>
                    <v-text-field name="input-3"
                                  label="Label Text"
                                  value="Input text"></v-text-field>
                </v-flex>
            </v-layout>

学校名单ts：

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

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

仪表板ts：

<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 school，因此它导航到仪表板，同时根据其ID获取该学校的数据

这是单一学校的api

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

如果你在邮递员上打开它，你会发现从一所学校获取数据需要id，你可以写1来测试

如果某些内容不明确或您想要特定代码，请告诉我，我会更新您想要的任何详细信息

Answer 1

我会写下这个答案，让你在阅读我的评论后结束你的问题（如果当然解决了）：

你可以通过两种简单的方式来实现：使用globalVariable或使用postMessage到下一页。

PostMessage示例

来自父窗口的

：window.postMessage(myMessage)

来自子窗口的

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

记得Cross Origin消息需要指定起源，但你会在这里找到你需要的一切：developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

希望有所帮助

如何保存项目中的ID以显示下一页上的特定数据（角度4）

1 个答案: