在另一个组件中调用已经存在的组件的方法

Question

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 ?

Answer 1

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.

Answer 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);
    }
}