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

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()

组件1和组件2没有任何父/子关系。

有没有办法在组件2中获取组件1的即时信息？

在java中，类似这样的

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

在没有BehaviorSubject和EventEmitter的情况下，有可能在角度上这样做吗？

Answer 1

您可以通过包含组件的父模板将组件A转发到其他组件B。没有可以查询的组件实例存储库。如果不希望使用模板在两者之间进行连接，则必须使用共享服务。

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

以上所述都有缺点。

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

我不推荐上面的内容，因为从视图外部突变另一个组件的内部状态是一种反模式。最好使用共享服务和可观察性。

Answer 2

我只需创建一个在另一个组件上有句柄的服务，您就可以将该组件的引用点传递给：

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