How to access method on another Component-CodePudding

I'm stuck on a part where I want to run a method from other component. What I want to do is to run confirmUpdateVersion() on a other .ts file.

file1.ts

import { AfterViewInit, Component, OnInit } from '@angular/core';
import { NgxSmartModalComponent, NgxSmartModalService } from 'ngx-smart-modal';

@Component({
  selector: 'app-update-version',
  templateUrl: './update-version.component.html',
  styleUrls: ['./update-version.component.scss']
})
export class UpdateVersionComponent implements OnInit, AfterViewInit {
  confirmUpdateVersionModule: NgxSmartModalComponent;

  constructor(
    private modalService: NgxSmartModalService
  ) { }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    this.confirmUpdateVersionModule = this.modalService.get('confirmUpdateVersion');
  }

  confirmUpdateVersion() {
    this.confirmUpdateVersionModule.open();
  }

  reloadCurrentPage() {
    window.location.reload();
   }

}

And I want to run confirmUpdateVersion() on file2.ts

@Injectable()
export class VersionService {

  constructor(private httpClient: HttpClient, private updates: SwUpdate, private alert: AlertService) {
    this.updates.available.subscribe(() => {
      this.confirmUpdateVersion();
    });
  }

Would apprecaite for all the help.

CodePudding user response：

Option 1:

You can use @ViewChild to access to any child component.

let assume you have following code

<one-modal></one-modal>

<button (click)="ngxSmartModalService.getModal('popupOne').open()">
  Open myModal 1
</button>

<button (click)="triggerChildMethod()">Trigger Child Method</button>

On your main component you can have the reference you your modal like following

@ViewChild(OneModalComponent) myModal: OneModalComponent;

where OneModalComponent is your component class.

Then you can use any public properties / method like following

  triggerChildMethod() {
    this.myModal.confirmUpdateVersion();
  }

Option 2: use shared services

Lets assume you could not access to the modal via @ViewChild you can still have two way communication between both by using a shared state service.

for that you will need a service which looks like following

export class SharedService {
  private _triggerAction = new Subject<void>();

  public trigger() {
    this._triggerAction.next();
  }

  public triggered$(): Observable<void> {
    return this._triggerAction.asObservable();
  }
}

When you call trigger method, it will emit new value on observable. When you subscribe to triggered$ observable, you will be informed as soon as new value is emited.

On you modal you can subscribe

  constructor(private sharedService: SharedService) {}

  ngOnInit() {
    this.sharedService
      .triggered$()
      .subscribe(() => this.confirmUpdateVersion());
  }

And anywhere else you can trigger by doing

    this.sharedService.trigger();

Live Example https://stackblitz.com/edit/ngx-smart-modal-example-qweyvt