Излучение события для компонента, чтобы выполнялась функция отдельного компонента

Question

У меня есть компонент с несколькими маршрутами (home, app и navbar).

Я предполагаю, что при нажатии кнопки navbar будет выполнена функция encrementcalc(). Есть ли способ реализовать это? Я пытался использовать генератор событий, но безуспешно: (

Может кто-нибудь мне помочь?

спасибо.

Ссылка на пример здесь Stackblitz

код

<div class="container">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
    </div>
    <ul class="nav navbar-nav pull-right">
      <li routerLinkActive="active"><a [routerLink]="['/home']">home</a></li>
      <li routerLinkActive="active"><a [routerLink]="['/navbar']">navbar</a></li>
          </ul>
  </div>
</nav>
  <router-outlet></router-outlet>
</div>

Answer 1

Вы должны создать службу, которая будет обмениваться информацией между navbar и домашним компонентом (или другим компонентом), это пример службы

    @Injectable({
    providedIn: 'root'})

    export class NavbarService {
      attttributeChange: EventEmitter<number> = new EventEmitter();
      constructor() {}

      emitAttributeChange(attribute: number) {
        this.sortAttributeChange.emit(sortAttribute);
      }
      getNavChangeEmitter() {
        return this.attributeChange;
      }
    }

Таким образом, к вашему компоненту navbar вы добавляете

EncrementInHome(){
  this.navbarService.emitAttributeChange(5);
}

и затем в своем домашнем компоненте в методе OnInit вы получаете отправленные данные

     ngOnInit() {
            this.subscription$ =                    
            this.navbarService.getNavChangeEmitter().subscribe(
          newChangeAttribute => {
          this.encrementcalc()
          });
      }

Answer 2

Я бы рекомендовал использовать службу связи в вашем случае.

сначала создайте increment.service.ts

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class IncrementService {
  private calcSource = new Subject<any>();

  calc$: Observable<any> = this.calcSource.asObservable();

  increment(x: number) {
    this.calcSource.next(x);
  }
}

, затем в вашем NavbarComponent

  import {IncrementService} from '../increment.service'

  constructor(private _incrementService: IncrementService) {}

  incrementInHome() {
    this._incrementService.increment(7);
  }

в конце концов, в вашем HomeComponent

  import {IncrementService} from '../increment.service'

  calc = 5;
  constructor(private _incrementService: IncrementService) {}

  ngOnInit() {
    this._incrementService.calc$.subscribe(x => this.calc += x)
  }

Answer 3

При настройке ваших компонентов я бы предложил вам воспользоваться услугой. Внутри сервиса у вас будет свойство, которое поддерживает состояние и другие методы для его извлечения и изменения. Затем вы будете использовать этот сервис из навигационной панели для увеличения свойства и из домашнего компонента для получения текущего значения.