组件间通信角6

Question

我有一个有一个页面的6角应用程序，其中所有记录的列表都显示在一个表中的数据库中。这个特征由一个独立的角分量处理，如下所示：

export class ReceiveOrderComponent implements OnInit{
//not entire code is shown 

 constructor(private _orderService : OrderService,
              private _downloadService : DownloadService) { }

//method to receive all orders by using OrderService

}

此中有一个下载按钮，该组件模板( receive.component.html )在单击时触发对所选记录的文件的下载。

实际下载(http communication )由DownloadService处理，该服务被注入到ReceiveOrderComponent中，如上面所示。

但我希望将下载功能保留在单独的组件(DownloadComponent)中，并将DownloadService注入到下面的组件loke中：

export class DownloadComponent implements OnInit{
//not entire code is shown 

 constructor(private _downloadService : DownloadService) { }

}

问题是receive.component.html在ReceiveOrderComponent中，单击操作应该在中调用另一个组件(即DownloadComponent)中的方法，而不是在receive.component.html所属的ReceiveOrderComponent中调用。

你能告诉我如何做到这一点吗？

Answer 1

Atul you can as Input ,Output Emitter (*Broadcasting ) to communication as defrent component 
IE:-

import { Component, Input } from '@angular/core';

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

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

import { HEROES } from './hero';

@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {`enter code here`
  heroes = HEROES;
  master = 'Master';
} 

Answer 2

import { Subject } from 'rxjs';

const subject = new Subject();

subject.next('missed message from Subject');

subject.subscribe(v => console.log(v));

subject.next('hello from subject!');