📜  Angular 4 从另一个组件执行函数 - Javascript 代码示例

📅  最后修改于: 2022-03-11 15:03:02.508000             🧑  作者: Mango

代码示例1
//Angular 4 execute function from another component

 didn't get time to test it but similar solution worked for me. the code created for your need.

Create a service like this

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MessageService {
    private _listners = new Subject();

    listen(): Observable {
       return this._listners.asObservable();
    }

    filter(filterBy: string) {
       this._listners.next(filterBy);
    }

}
then implement in your header component like this

// header.component.ts
@Component({
    selector: 'header',
    templateUrl: `
        
` }) export class HeaderComponent { @Output() onFilter: EventEmitter = new EventEmitter(); constructor(private _messageService: MessageService){} clickFilter():void { // this.onFilter.emit('Register click'); this._messageService.filter('Register click'); } } then use in your store component like this @Component({ selector: 'store', template: `
Test
` }) export class StoreComponent { constructor(private _messageService: MessageService){ this._messageService.listen().subscribe((m:any) => { console.log(m); this.onFilterClick(m); }) } onFilterClick(event) { console.log('Fire onFilterClick: ', event); } } The concept is that you can use observable in a service and subscribe in the component where you want it (store.component) and can send event from anywhere in the app like i did in the header.component I hope it will help you