Ich habe eine Komponente mit mehreren Routen (Home, App und Navbar).

Ich beabsichtige, durch Drücken der Navbar-Taste die Funktion encrementcalc() auszuführen. Gibt es eine Möglichkeit, dies umzusetzen? Ich habe versucht, den Event-Emitter zu verwenden, aber ohne Erfolg :(

Kann mir jemand helfen?

Danke.

Link zum Beispiel hier Stackblitz

Code

<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>

Imagem

Imagem

0
Steve Mc 21 Feb. 2020 im 19:07

3 Antworten

Beste Antwort

Sie müssen einen Dienst erstellen, der Informationen zwischen der Navigationsleiste und der Home-Komponente (oder einer anderen Komponente) austauscht. Dies ist ein Beispiel für den Dienst

    @Injectable({
    providedIn: 'root'})

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

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

Also fügen Sie Ihrer Navbar-Komponente hinzu

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

Anschließend erhalten Sie in Ihrer Home-Komponente in Ihrer OnInit-Methode die gesendeten Daten

     ngOnInit() {
            this.subscription$ =                    
            this.navbarService.getNavChangeEmitter().subscribe(
          newChangeAttribute => {
          this.encrementcalc()
          });
      }
1
BELLIL 21 Feb. 2020 im 16:25

Ich würde empfehlen, in Ihrem Fall einen Kommunikationsdienst zu verwenden.

Erstelle zuerst ein 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);
  }
}

Dann in deinem NavbarComponent

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

  constructor(private _incrementService: IncrementService) {}

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

Schließlich in Ihrem HomeComponent

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

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

  ngOnInit() {
    this._incrementService.calc$.subscribe(x => this.calc += x)
  }
1
Fahd Lihidheb 21 Feb. 2020 im 17:41

Bei der Einrichtung Ihrer Komponenten würde ich vorschlagen, dass Sie einen Dienst verwenden. Innerhalb des Dienstes hätten Sie eine Eigenschaft, die den Status und andere Methoden zum Abrufen und Ändern beibehält. Sie würden diesen Dienst dann über die Navigationsleiste verwenden, um die Eigenschaft zu erhöhen, und über die Home-Komponente, um den aktuellen Wert abzurufen.

0
Frantz Woldy Amazan 21 Feb. 2020 im 16:15