angular - ngIf- Uttrycket har ändrats efter att det kontrollerades. Tidigare värde: 'ngIf: false'. Nuvarande värde: 'ngIf: true'

Hur man anropar en metod från en komponent till en annan när den inte har någon förälder-barn-relation?

Jag har 2 syskonkomponenter och som nedan:

header.ts

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

del.ts

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

I det här fallet behöver jag anropa postValues()-metoden i getMasterData() för att få vissa beskrivningsvärden, och det finns ingen kommunikation mellan förälder och barn.

Svar #1

Det är inte möjligt att direkt utlösa en metod i en syskonkomponent, men det finns ett sätt att utlösa ett syskonelementhändelse med hjälp av import { BehaviorSubject } from 'rxjs';

Jag använder detta tillvägagångssätt för att skicka data till en syskonkomponent, men det fungerar också om du utlöser ett evenemang.

Först skapar du en tjänst, en tjänst som jag kallar 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)
  }

}

Nu triggar en komponent en annan komponent, för nu triggar Com1 Com2-händelsen.

Com1 utlöser DataService triggerEvent med passera booleskt värde.

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 Observera den variabeln när data ändras så triggar metoden 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 är att använda

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

i komponenten där du får felet

Relaterade artiklar