手动在Angular 5中广播事件 [英] Broadcasting events mannually in Angular 5

问题描述

我一直在Angular 5中寻找$broadcast和$on的类似实现.我发​​现，我们可以创建自定义服务，以使用broadcaster来完成这项工作.

I was looking for the similar implementation of $broadcast and $on in Angular 5. I found out that, we can create custom service, to do this job using broadcaster.

我有两个平行的部分.我要在其中听更改事件.每当父级触发事件时，这两个组件应侦听并进行一些处理.但是我正在尝试这种方法，但是，只有一个Component1或Component2会监听该事件.

I have two parallel components. In which I want to listen to the change event. Whenever parent trigger event these two components should listen and do some processing. But I am trying this approach but, either only one Component1 or Component2 listens to the event.

Broadcaster.ts

interface BroadcastEvent {
  key: any;
  data?: any;
}

@Injectable()
export class Broadcaster {
  private _eventBus: Subject<BroadcastEvent>;

  constructor() {
    this._eventBus = new Subject<BroadcastEvent>();
  }

  broadcast(key: any, data?: any) {
    this._eventBus.next({key, data});
  }

  on<T>(key: any): Observable<T> {
    return this._eventBus.asObservable()
      .filter(event => event.key === key)
      .map(event => <T>event.data);
  }
}

Component1.ts

@Component({
  selector: 'app-Component1',
  templateUrl: './Component1.component.html',
  styleUrls: ['./Component1.component.css']
})
export class Component1 implements OnInit{

  @Input() data: Student;

  constructor(private broadcaster: Broadcaster) {

  }

  ngOnInit() {


    this.broadcaster.on<string>('selectStudent').subscribe(data => {
      console.log("Component 1");
    });
  }

Component2.ts

@Component({
  selector: 'app-Component2',
  templateUrl: './Component2.component.html',
  styleUrls: ['./Component2.component.css']
})
export class Component2 implements OnInit{

  @Input() data: Student;

  constructor(private broadcaster: Broadcaster) {

  }

  ngOnInit() {


    this.broadcaster.on<string>('selectStudent').subscribe(data => {
      console.log("Component 2");
    });
  }

父组件

@Component({
  selector: 'app-Component1',
  templateUrl: './Parent .component.html',
  styleUrls: ['./Parent .component.css']
})
export class Parent implements OnInit{

  data: Student;

  constructor(private broadcaster: Broadcaster) {

  }

  ngOnInit() {
  }

  onClick(data) {
   this.data = data;
   this.broadcaster.broadcast('selectStudent');
   console.log("Parent Component");
 }

父本

<app-Component1 [data]="data"> </app-Component1>
<app-Component2 [data]="data"> </app-Component2>

输出

Parent Component

Component 1

输出

Parent Component

Component 2

我想念什么吗?为什么所有组件都不监听事件?

Is anything I am missing? Why are all components not listening event?

推荐答案

我发现了Angular网站给出的方法.编写了一项服务来广播事件并收听事件.

I found out way given by angular website. Written one service to broadcast event and listen to the event.

datachangedservice.ts

@Injectable()
export class DataChangedService {

    private dataChange = new Subject<Student>();

  dataChanged$ = this.dataChange.asObservable();

  dataChanged(data) {
    this.dataChange.next(data);
  }
}

component1.ts

@Component({
  selector: 'app-Component1',
  templateUrl: './Component1.component.html',
  styleUrls: ['./Component1.component.css']
})
export class Component1 implements OnInit{

  @Input() data: Student;

  constructor(private broadcaster: DataChangedService) {    
  }

  ngOnInit() {
     this.broadcaster.dataChanged$.subscribe( data => {
           // some code
     });        
  }

parent.ts

@Component({
  selector: 'app-Component1',
  templateUrl: './Parent .component.html',
  styleUrls: ['./Parent .component.css']
})
export class Parent implements OnInit{

  data: Student;

  constructor(private broadcaster: DataChangedService) {

  }

  ngOnInit() {
  }

  onClick(data) {
   this.broadcaster.dataChanged(data);
   console.log("Parent Component");
 }

这篇关于手动在Angular 5中广播事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！