Question

我有一个角度页面，在那里我查询web服务，然后对数据进行一堆处理，最后说100个名字。在HTML页面上，我只显示数字100，但如果我点击它，我想转到新页面，其中显示所有100个实际名称。显然，要传递URL字符串的数据太多了。

我不确定如何直接发布到角度页面。处理这个问题的正确方法是什么？

这不是同一页面上的父/子关系。

Answer 1

最好的办法是将这100个名字存储在客户端的Angular服务中。然后，您可以从任一页面访问该服务以显示100或显示100个名称。

服务是一个简单的类，可以作为单例实现，这意味着即使从一个组件移动到另一个组件，您分配给服务的数据仍保留在服务中。

我在这里有一个例子：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

import { Injectable } from '@angular/core';

@Injectable() 
export class DataService {
  serviceData: string;    // <-- Your data would be stored here
}

检索数据后，您可以使用以下简单代码将其存储在服务中：

export class MainComponent {

  constructor(public dataService: DataService) { }

  getData() {
     // whatever code you are using now to get the data.
     this.dataService.serviceData = retrievedData;
  }
}

然后在您要路由到的新组件中，您只需获取如下数据：

export class OtherComponent {

  get data():string { 
    return this.dataService.serviceData; 
  } 

  constructor(public dataService: DataService) { } 
}

然后，您的OtherComponent可以使用data属性绑定到数据。

Answer 2

组件之间的互动是通过其Input和Output属性完成的。有关详细信息，请参阅this链接。

所以基本上你通过使用从一个组件到另一个组件的这些属性来传递数据。

Answer 3

由于Angular是SPA的框架，因此POST不是将数据传递到“详细信息视图”的完美解决方案。您可以关注获取started guidelines并使用@Input属性将信息传递给子组件。

以角度5页面接收POST

3 个答案: