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

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

2 个答案: