angular - ngIf- Uttrykket har endret seg etter at det ble sjekket. Forrige verdi: 'ngIf: false'. Nåværende verdi: 'ngIf: true'

Hvordan kalle en metode fra en komponent til en annen når det ikke er noen foreldre-barn-relasjon?

Jeg har 2 søster-/brorkomponenter og som nedenfor:

header.ts

private postValues() {
   this._PartService.PostDataValues(this.search)
       .subscribe(result => {
       })
}

del.ts

this._PartService.getMasterData()
    .subscribe(result => {
    })

I dette tilfellet trenger jeg å kalle postValues()-metoden inni getMasterData() for å hente noen beskrivelsesverdier, og den har ingen kommunikasjon mellom foreldre og barn.

Svar #1

Det er ikke mulig å utløse en søsterkomponentmetode direkte, men det finnes en måte å utløse en søsterkomponenthendelse på ved bruk av import { BehaviorSubject } from 'rxjs';

Jeg bruker denne tilnærmingen for å sende data til søsterkomponenten, men den fungerer også hvis du utløser en hendelse.

Først lager du en tjeneste, tjeneste som jeg kaller DataService.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private triggerEventMsg = new BehaviorSubject(false);
  triggerEvent = this.triggerEventMsg.asObservable();

  constructor() { }

  triggerEvent(val: boolean) {
    this.messageSource.next(message)
  }

}

Nå utløser én komponent en annen komponent. For nå utløser Com1 Com2-hendelsen.

Com1 utløser DataService triggerEvent med å sende boolsk verdi.

Com1.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-com1',
  template: `
    {{message}}
    <button (click)="newMessage()">New Message</button>
  `
})
export class Com1 implements OnInit {

  constructor(private data: DataService) { }

  ngOnInit() {

  }

 com1ClickEvent() {
    this.data.triggerEvent(true);
  }

}

Com2 Observer den variabelen når data endres, metoden utløses i Com2-komponenten.

Com2.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-com2',
  template: `
    <p>Com2</p>
  `
})
export class Com2 implements OnInit {



  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.triggerEventMsg.subscribe(message => {
        // Do What ever you want.

     })
  }

}

Svar #2

Min løsning er å bruke

    ngAfterViewChecked(){
      this.cdRef.detectChanges();
    }

i komponenten der du får feilen

Relaterte artikler