2016-03-30 6 views
2

So weiß ich, dass Sie zwei miteinander in Beziehung stehende Komponenten über einen Dienst miteinander kommunizieren können, indem eine Komponente ein Ereignis im Dienst und die andere im Dienst abonnieren.Angular Service Call-Funktion in der Komponente

Meine Frage: direkt

Kann ein Dienst eine Funktion in einer Komponente nennen?

+0

Wenn Sie einen Verweis in Ihren Dienst auf die Komponente, sicher haben. Aber ich würde nicht empfehlen, die beiden Klassen aufeinander zu beziehen. –

+1

Also ist im Grunde die Event-Throwing und Subscribe-Methode Best Practice? –

+0

Definiert. Das können Sie mit Beobachtern tun. Sie möchten es getrennt halten, um Trennungen von Bedenken zu behalten. Die Antwort von Günter scheint richtig zu sein. –

Antwort

9

Nicht standardmäßig. Ein Service ist eine Instanz einer Klasse, mehr nicht.

@Injectable() 
class MyService { 
} 

@Component({ 
    selector: 'my-component', 
    ... 
)} 
class MyComponent { 
    constructor(private myService:MyService) {} 
} 

@NgModule({ 
    providers: [MyService], 
    ... 
}) 
export class AppModule {} 

diese Weise ein Dienst (MyService) Instanz MyComponent geben wird, aber das ist alles. Die Serviceinstanz hat kein Wissen über MyComponent.

Was Sie wahrscheinlich möchten, ist ein Observable zu Ihrem Dienst hinzufügen und abonnieren Sie es in Ihrer Komponente.

@Component({ 
    selector: 'my-component', 
    ... 
)} 
class MyComponent { 
    constructor(myService:MyService) { 
    myService.someObservable.subscribe(value => doSomething(value)); 
    } 

    doSomething(value) { 
    console.debug(value); 
    } 
} 

diese Art und Weise der Dienst ein Verfahren auf der Komponente „ruft“, wenn der ObservablesomeObservable einen anderen Wert emittiert.

Weitere Details finden detect change of nested property for component input

+0

Sie müssen sicherstellen, dass der injizierte MyService in der Komponente und der an anderer Stelle auf dasselbe Objekt verweisen. Andernfalls reagiert die Komponente nicht auf das Ereignis von MyService. – Chao

+0

Das ist, indem man es nicht direkt an der Komponente bereitstellt, sondern an einem gemeinsamen Elternteil (oder "AppComponent", das das gemeinsame Elternteil der gesamten Anwendung ist, oder in 'bootstrap()') –

+0

Sie haben Recht. Ich bemerke nur andere. Du bekommst eine nette Lösung. – Chao

0

Die Antwort oben richtig ist, außer dass Sie Bootstrap nicht Ihren Dienst, werden Sie Ihren Dienst in Ihrem Provider-Array in der app.module hinzuzufügen.

@NgModule({ 
    declarations: [MyComponent], 
    imports: [], 
    providers: [MyService], 
    bootstrap: [AppComponent] 
}) 

Dann injizieren Sie Ihren Dienst innerhalb der Komponente

import { Component } from '@angular/core' 

import { MyService } from './path/to/my.service' 

... 

export class MyComponent { 

    constructor(private myService:MyService){} 

} 
Verwandte Themen