时间戳

首页 > 解决方案 > 在另一个组件中调用已经存在的组件的方法

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

问题描述

组件 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");

在没有BehaviorSubjectand的情况下有任何可能的方法EventEmitter吗？

标签： angulartypescript

解决方案

您可以通过包含它们的父模板将组件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如果您在外部改变组件状态表单，则需要将视图标记为脏。

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

推荐阅读