Question

我是Angular2的新手，我想知道它是什么：

订阅
@Output
@input

Angular2中的事件发射器？我如何在Angular中使用它们？

Answer 1

我们使用输入和输出装饰器将信息从一个组件传递到另一个组件，如父级和子级，如向上或向下传递。传递的信息以可观察的形式从 rxjs 传递。

接下来，我们在此 Observable 上调用subscribe，这样我们就可以收听正在通过的任何数据。在订阅中，我们使用三个不同的回调：第一个在接收新值时被调用，第二个用于出现的任何错误，而last表示在传入数据序列完成并成功时要调用的函数。

关于使用输入输出看看@ this link

https://rahulrsingh09.github.io/AngularConcepts/#/inout

在此示例中，我们使用事件发射器将信息从Parent传递给Child并观察组件中发生的更改，当值更改时，我们订阅了更改，这些都由Rxjs处理。

可以在链接

上找到相同的代码

https://github.com/rahulrsingh09/AngularConcepts/tree/master/src/app/parentchild

在http调用的情况下使用订阅，我们获取数据流并订阅它。

<强>订阅

 this.weatherService.getLukeSkywalkerObservable().subscribe(res => {
        this.lsObservable = res;
    });

其中getLukeSkywalkerObservable是服务调用

getLukeSkywalkerObservable(){
      return this.http.get('https://swapi.co/api/people/1/')
              .map(res => {
                 return  res.json(); // using maps to filter data returned form the http call
              }).map(data => {
                return data; // using maps of maps to filter data returned form the map
        }).flatMap((jedi) => this.http.get(jedi.homeworld))
          .map(res => {
           return res.json().name; // using flat maps to combine data returned from two observables into one
          }).catch((error:any) => Observable.throw(error.json().error || 'Server error'));

      //switchMap is very similar to flatMap, but with a very important distinction.
    // Any events to be merged into the trunk stream are ignored if a new event comes in.
  }

One Update

如果你想在组件之间传递信息，请使用@MarkRajcok的答案。

Delegation: EventEmitter or Observable in Angular2 他已经定义了为什么要使用行为主题 ct或重播主题而不是事件发射器

Answer 2

@Inputs和@Outputs

这两个属性可以传递给@Component装饰器来实现向下和向上的数据流：“输入”和“输出。”这些有时令人困惑，因为早期版本的Angular 2 alpha ，它们被称为“属性”（用于“输入”）和“事件”（用于“输出”），并且一些开发人员对名称更改不太着迷，尽管它似乎有意义：https://github.com/angular/angular/pull/4435。



所以Inputs，正如您在上面的层次结构讨论中所猜测的那样，指定您可以在组件上设置哪些属性，而outputs标识组件可以触发的事件以发送信息。其父级的层次结构

什么是事件发射器中的subscribe / @ Output / @输入？

2 个答案:

订阅

@Inputs和@Outputs