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

ฉันต้องการเรียก component 1 method someMethod() จาก component 2

คอมโพเนนต์ 1 และ คอมโพเนนต์ 2 ไม่มีความสัมพันธ์แบบพ่อแม่/ลูก

มีวิธีใดที่จะได้อินสแตนซ์ของ component 1 ใน component 2 หรือไม่

ในจาวามีบางอย่างเช่นนี้

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

มีวิธีใดที่เป็นไปได้แบบนี้ใน Angular โดยไม่ใช้ BehaviorSubject และ EventEmitter หรือไม่?

คำตอบ #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 ว่าเลอะหากคุณเปลี่ยนแปลงสถานะของคอมโพเนนต์จากภายนอก

ฉันไม่แนะนำสิ่งที่กล่าวมาข้างต้น เพราะการเปลี่ยนแปลงสถานะภายในของคอมโพเนนต์อื่นจากภายนอกมุมมองถือเป็นรูปแบบการเขียนโค้ดที่ไม่ดี ควรใช้บริการที่แชร์ร่วมกันและ observables จะดีกว่า

คำตอบ #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);
    }
}