2

component 1

import { Component } from '@angular/core';
@Component({
    selector: 'app-component1',
    template:
    `
    <button (click)="submit()"></button>
    `
})
export class Component {

    constructor() { 
    }
    someMethod(): void {
    }
}

component 2

import { Component } from '@angular/core';
    @Component({
        selector: 'app-component2',
        template:
        `
        <p>text</p>
        `
    })
    export class Component2 {

        constructor() { 
        }
    }

i want to call the component 1 someMethod() from component 2

component 1 and component 2 haven't any parent/child relation.

is there any way to get the instant of component 1 in component 2

in java something like this

MyClass myClass = applicationContext.getBean("myClass");

is there any possible way like this in angular without BehaviorSubject and EventEmitter?

Ragulan
  • 1,677
  • 17
  • 24
  • 1
    Possible duplicate of [call a function in a component from another component](https://stackoverflow.com/questions/42405038/call-a-function-in-a-component-from-another-component) – Silvermind Jun 12 '19 at 15:02
  • in there it has a parent-child relation. but here there are no relation. and i need to get a instant of component 1 in component 2 – Ragulan Jun 12 '19 at 15:09
  • 2
    No, there is not. It is even mentioned in the question: _these two components are not related to each other (sibling, parent and child, ...)_. Notice the word 'not'. Also, the answer is providing you with a possible solution; using a shared service. – Silvermind Jun 12 '19 at 15:15

2 Answers2

2

You can forward component A to the other component B via the parent template that contains them. There is no repository of component instances that you can query. If you do not want to use the template to connect between the two, then you have to use a shared service instead.

app.component.html:

  <component-a #refA></component-a>
  <component-b [refA]="refA"></component-b>

  @Component({...})
  export class ComponentA {
      public someMethod() { }
  }

  @Component({...})
  export class ComponentB implement OnInit {
      @Input() refA: ComponentA;

      public ngOnInit() {
          if(this.refA) {
             this.refA.someMethod();
          }
      }
  }

The above has disadvantages.

  • you can trigger a this expression has changed after being checked error.
  • you need to mark the view in ComponentA as dirty if you mutate the component state form outside.

I don't recommend the above, because mutating the internal state of another component from outside the view is an anti-pattern. It is better to use a shared service and observables.

Reactgular
  • 52,335
  • 19
  • 158
  • 208
-2

I would just create a service that has a handle on the other component to where you can pass the reference point of that component into:

import { Component } from '@angular/core';
import { ComponentService } from 'filepathofyourcomponentservice';
@Component({
    selector: 'app-component2',
    template:
    `
    <p>text</p>
    `
})
export class Component2 {
    ViewChild('component) component: Component;

    constructor(private componentService: ComponentService) { 
        this.componentService.tapIntoComponent(this.component);
    }
}
Ben Brown
  • 329
  • 2
  • 9