Функция в одном компоненте вызывается нажатием кнопки в другом компоненте в Angular

Question

Я пытаюсь создать степпер в своем приложении angular, используя материал angular. Но степпер используется только как элемент пользовательского интерфейса. Таким образом, остальная часть тела приложения хранится в других отдельных компонентах. Теперь я хочу нажать кнопку в одном компоненте, которая вызывает функцию stepper.next () в компоненте шагового двигателя, чтобы программно go перейти к следующему шагу в шаговом режиме. Также оба эти компонента являются дочерними по отношению к AppComponent (родительский компонент). Возможно ли добиться чего-то подобного? Это означает, что можно вызвать функцию, объявленную в одном компоненте, с помощью нажатия кнопки в другом компоненте? Можете ли вы использовать @Output для создания функций?

My stepper.component.ts:

import { StepperService } from './../stepper.service';
import { Component, OnInit } from '@angular/core';

@Component({
   selector: 'app-stepper',
   templateUrl: './stepper.component.html',
   styleUrls: ['./stepper.component.css']
})
 export class StepperComponent implements OnInit {

  constructor(private stepperService: StepperService) { 
     this.stepperService.stepUpRecieve().subscribe(arg => {
        console.log(arg)
   })
  }

   ngOnInit(): void {}
 }

My stepper.service.ts:

import { Injectable } from '@angular/core';
import { MatStepper } from '@angular/material/stepper';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StepperService {

  private stepperSubject = new Subject<MatStepper>()

  stepUpSend(){
    this.stepperSubject.next()
  }

  stepUpRecieve(){
     return this.stepperSubject.asObservable()
  }

  constructor() { }
}

другой мой компонент при нажатии кнопки:

import { StepperService } from './../stepper.service';
import { DataProviderService } from './../data-provider.service';
import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-start',
  templateUrl: './start.component.html',
  styleUrls: ['./start.component.css']
})
export class StartComponent implements OnInit {

  @Output() changeAppStateEmitter = new EventEmitter()

  constructor(private dataProvider: DataProviderService, private 
stepperService: StepperService) { }

  ngOnInit(): void {
    this.dataProvider.createSocket()
  }

   // button click:
  startTask(){
    let startMsg = {"jsonrpc": "2.0", "method": "startCapture"}
    this.dataProvider.sendMsg(startMsg)
    this.stepperService.stepUpSend()
    this.changeAppStateEmitter.emit("CaptureFingerprint")   
  }
}

Answer 1

Вы можете использовать Output, но я думаю, что это лучше всего в случае простого дочернего родителя. Если у вас есть много разных мест, где можно повысить шаговый уровень, вам следует воспользоваться услугой angular. Их можно внедрить в любой конструктор компонентов. Если вы объявите тему в этой службе (stepper.service.ts), она сможет транслировать событие в степперкомпонент. Шаговый компонент подпишется на тему в службе. В любом другом месте в приложении вы сможете вызывать и работать в службе. Шаг вверх или вниз ?. Погуглите «простой angular сервис с темой», и вы найдете много. Это очень простой случай c, поэтому услуга не должна превышать пары строк. Если вы ничего не найдете, я помогу вам с кодом. Сейчас не за компьютером ☺️