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

Question

组件 1

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

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

组件 2

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

        constructor() { 
        }
    }

我想从组件2调用组件1 someMethod()

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

有没有办法在组件2中获取组件1的瞬间

在java中是这样的

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

在没有 BehaviorSubject 和 EventEmitter 的情况下，是否有任何可能的方式？

Answer 1

您可以通过包含它们的父模板将组件 A 转发到另一个组件 B。没有您可以查询的组件实例存储库。如果您不想使用模板连接两者，则必须改用共享服务。

应用程序组件.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();
          }
      }
  }

以上都有缺点。

• 您可以触发一个此表达式在检查后已更改错误。
• 如果您在外部更改组件状态表单，则需要将 ComponentA 中的 View 标记为脏。

我不推荐上述方法，因为从 View 外部改变另一个组件的内部状态是一种反模式。最好使用共享服务和可观察对象。