How to execute a function from another component that is NOT a brother of the first component?

I am trying to execute a function from another component ( These 2 components are NOT siblings ). I assume that I will need to use @Output and eventEmitter to do this or create a Service and subscribe to Observable to share the same data on all components (I know how to pass a message (string), but I don't know how to execute a function) . I'm not sure where to start. I am trying to execute function1 FROM function2 . Can someone help me on how to make this work? Provide the plunker . This is what my project looks like:

src |__app(FOLDER) |__home(FOLDER) | | | |__home.component.ts | |______function2(){ | What do I need to put in here to execute function1? | } | |__products(FOLDER) | |__tools(FOLDER) | |____tools.component.ts |____function1(){ alert("I'm inside function 1!!"); } 

As you saw, I have a home.component.ts file that has function2 and a tools.component.ts file that has function1, so any ideas on how to execute function1 from function2?

+5
source share
4 answers

I agree that your idea of ​​observable service is your best option here (like the others), although I would prefer BehaviorSubject in this case. Here is a simple, working plunkr demonstrating how you could implement this:

https://plnkr.co/edit/quHc2yOkxXIbXYUlnZbB?p=preview

If we break this requirement, you will need an event proxy service that simply passes the event. This plunkr can also pass a parameter object through a service - in case you need to do this, but if not, just pass in any object you want (or just remove the param arguments from all the methods).

This implementation does not take care that the components are not siblings, because we use the service. Both will be provided with the same service instance regardless of the structure of your application.

For a quick reference, code snippets are important here:

EventProxyService

 import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; @Injectable() export class EventProxyService { private eventSubject = new BehaviorSubject<any>(undefined); triggerSomeEvent(param: any) { this.eventSubject.next(param); } getEventSubject(): BehaviorSubject<any> { return this.eventSubject; } } 

Firstcompponent

 import { Component, OnInit } from '@angular/core'; import { EventProxyService } from './event-proxy.service'; @Component({ selector: 'app-first', templateUrl: './src/first.component.html' }) export class FirstComponent implements OnInit { displayText = 'I havent created any events yet.'; constructor(private eventProxyService: EventProxyService) { } ngOnInit() { } triggerAnEvent() { this.eventProxyService.triggerSomeEvent(Date()); this.displayText = 'I fired an event.' } } 

SecondComponent

 import { Component, OnInit } from '@angular/core'; import { EventProxyService } from './event-proxy.service'; @Component({ selector: 'app-second', templateUrl: './src/second.component.html' }) export class SecondComponent implements OnInit { displayText = 'I havent got an event yet'; constructor(private eventProxyService: EventProxyService) { } ngOnInit() { this.eventProxyService.getEventSubject().subscribe((param: any) => { if (param !== undefined) { this.theTargetMethod(param); } }); } theTargetMethod(param) { this.displayText = 'Target Method got called with parameter: "' + param + '"'; } } 
+2
source

Use the service. Subscribe to Service Monitoring in your home site and change the observed using tools

 //Your service private dataSource = new Subject<any>(); data = this.searchDataSource.asObservable(); change(param:any) { this.searchDataSource.next(param) } //Your home.component this.myService.data.subscribe((param: any) => { console.log(param) } //Your tool this.myService.change("Hello world"); 

Since the question is the execution of the function, you can use this idea by doing something like

 //Your tool: this.myService.change("Command1") //or even this.myService.change({"command":"Command1","arg":myvariable}) //Your home.component this.myService.data.subscribe((param:any)=> { switch (param.command) { case "Command1": this.function1(param.arg); break; case "Command2": this.function2(); break; .... } } 
+1
source

Depending on what you are trying to do, you have two options.

First:. If you need Angular functions (like dependency injection) or want to share data, you should consider using the service. Enough documentation and tutorials (see angular docs .) I recommend reading this carefully.

Second: If you only need JavaScript, you can create a TypeScript file (for example, /src/app/shared/tools.ts ) and put your own method there. This is mostly useful for static functions, you can import and use the function where you need it. (Tip: do pure .)

0
source

Inheritance of components.

Let's say one component.

 @Component({ ... }) export class Component1 { constructor(); public test1() { console.log("this is a test"); } } 

you can inheritance first component as a child of the test1 method

 @Component({ ... }) export Class Component2 extends Component1 { constructor(); //Execute test1 method test1(); } 

Also remember that if you are using angular, you need to export your components in declarations and entryComponents . You also need to import it into a new component.

 import { Component1 } from 'directory/component'; 

/ * Example * /

import { SplashScreen } from 'directory/splash-screen';

-1
source

Source: https://habr.com/ru/post/1274450/


All Articles