服务：

Question

从概念上讲，我有以下设置：

 AppComponent
      |     \
      |      \
      |   FeedbackComponent
      |
 Router-Outlet
      |
SearchComponent

我们的想法是，当您尝试使用FeedbackComponent提供反馈时，它将收集webapp的当前状态并将其发送到服务器。我想从SearchComponent收集它运行的最新搜索。

在AppComponent中，我有：

constructor(private router: Router) {}

在我使用反馈的AppComponent视图中，我有：

<feedback [router]="router"></feedback>

然后，我可以从FeedbackComponent获取当前“路由”组件的名称this.router.currentInstruction.component.componentType.name（这将返回字符串“SearchComponent”）。但是，componentType是路由器当前指向的对象的构造函数，而不是该对象的实例。由于我没有实例，所以我不能要求SearchComponent进行最后一次搜索而不将该查询设为静态（我不想这样做，它会打破其他事情）。

Angular 1有$broadcast和$emit，但Angular 2似乎没有替代。

如果我没有使用Router-Outlet加载SearchComponent，那么我可以使用@Output()和@Input()通过AppComponent在它们之间传递信息，但我不认为我能做到这一点以这种方式使用路由器。

我的FeedbackComponent实例如何从我的SearchComponent实例请求数据？

我正在与Angular2.0.0-beta.13保持同步

Answer 1

Angular2它使用Services和Dependency Injection进行组件之间的通信（您也可以使用@input将基本数据从父级传递给子级

所以你想创建一个服务， @Inject SearchComponent 中的服务在服务中设置一些数据（设置..函数）然后 @Inject < / strong> FeedbackComponent 中的服务并获取数据（get ... function）

Answer 2

服务：

var xmlHttpObject = createXmlHttpRequestObject();
console.log(xmlHttpObject); // shows undefined if not created

function createXmlHttpRequestObject() {
  if (XMLHttpRequest) return new XMLHttpRequest(); // Works in most browsers

  // IE 
  var xmlHttpObject;

  if ((Object.getOwnPropertyDescriptor &&
      Object.getOwnPropertyDescriptor(window, "ActiveXObject")) ||
    "ActiveXObject" in window) {
    try {
      xmlHttpObject = new ActiveXobject("Microsoft.XMLHTTP");
    } catch (e) {
      console.log(e);
    }
    return xmlHttpObject;
  }
}

组件：

import {Injectable, EventEmitter} from "@angular/core";    

@Injectable()
export class DataService {
onGetData: EventEmitter = new EventEmitter();

getData() {
  this.http.post(...params).map(res => {
    this.onGetData.emit(res.json());
  })
}

如何让两个子组件交换数据？

2 个答案:

服务：

组件：