angular - Hur man anropar komponentmetod från en tjänst? (angular2)

Jag vill skapa en tjänst som kan interagera med en komponent. Alla andra komponenter i min app ska kunna anropa denna tjänst, och denna tjänst ska interagera med denna komponent.

Hur man anropar en komponentmetod från en tjänst?

@Component({
  selector:'component'
})
export class Component{

  function2(){ 
    // How call it?
  }
}

Från denna tjänst?

@Injectable()

export class Service {


  callComponentsMethod() {
    //From this place?;
      }
}

Svar #1

Interaktion mellan komponenter kan faktiskt uppnås med hjälp av tjänster. Du kommer att behöva injicera tjänsten som används för kommunikation mellan komponenter i alla de komponenter som behöver använda den (alla anropande komponenter och den anropade metoden) och utnyttja egenskaperna hos Observables.

Den delade tjänsten kan se ut ungefär så här:

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

@Injectable()
export class CommunicationService {

  // Observable string sources
  private componentMethodCallSource = new Subject<any>();
  
  // Observable string streams
  componentMethodCalled$ = this.componentMethodCallSource.asObservable();

  // Service message commands
  callComponentMethod() {
    this.componentMethodCallSource.next();
  }
}

Exempel :

Avsändare:

callMethod = function () {
   this.communicationService.callComponentMethod();
}

Mottagare:

this.communicationService.componentMethodCalled$.subscribe(() => {
      alert('(Component2) Method called!');
});

Jag har skapat ett grundläggande exempel här, där klick på en knapp från Component1 kommer att anropa en metod från Component2.

Om du vill läsa mer om ämnet, vänligen hänvisa till den dedikerade dokumentationssektionen: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Svar #2

Frågan frågar inte om komponentinteraktion, den frågar om att anropa en komponentmetod från en tjänst.

Detta kan enkelt uppnås genom att injicera en tjänst i komponenten. Sedan definierar man en metod i tjänsten som tar en funktion som parameter. Metoden ska spara denna funktion som en egenskap hos tjänsten och kalla på den varhelst den vill.

// -------------------------------------------------------------------------------------
// codes for component
import { JustAService} from '../justAService.service';
@Component({
  selector: 'app-cute-little',
  templateUrl: './cute-little.component.html',
  styleUrls: ['./cute-little.component.css']
})
export class CuteLittleComponent implements OnInit {
  s: JustAService;
  a: number = 10;
  constructor(theService: JustAService) {
    this.s = theService;
  }

  ngOnInit() {
    this.s.onSomethingHappended(this.doThis.bind(this));
  }

  doThis() {
    this.a++;
    console.log('yuppiiiii, ', this.a);
  }
}
// -------------------------------------------------------------------------------------
// codes for service
@Injectable({
  providedIn: 'root'
})
export class JustAService { 
  private myFunc: () => void;
  onSomethingHappended(fn: () => void) {
    this.myFunc = fn;
    // from now on, call myFunc wherever you want inside this service
  }
}

Relaterade artiklar