2017-12-31 141 views
0

Ich lerne nur eckig Tag für Tag. Ich lerne gerade eckige Dienste und ich bin wirklich verwirrt über etwas, das mich verwirrt und ich kann es nicht verstehen.So rufen Sie eine Methode im Winkel Service

Hier ist der Code.

Servicecode

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


@Injectable() 
export class DataService { 

    private goals = new BehaviorSubject<any>(['The initial goal','Another silly life goal']); 
    goal = this.goals.asObservable(); 

    constructor() { } 

    changeGoal(goal_param) { 
     this.goals.next(goal_param) 
    } 

} 

Startseite Komponentencode

ngOnInit() { 
     this.itemscount = this.goals.length; 
     this._data.goal.subscribe(res => this.goals = res); 
     this._data.changeGoal(this.goals); 
    } 

Startseite Komponente Template-Code

<div class="container color-dark"> 
    <div class="col"> 
    <p>Add a bucket list item</p> 
    </div> 
    <div class="col"> 
    <p>Your bucket list ({{itemscount}})</p> 
    </div> 
</div> 
<div class="container color-light"> 
    <div class="col"> 
    <p class="sm">Use this form below to add a new bucket list goal. What do you want to accomplish in your life?</p> 

    <form> 
     <input type="text" class="txt" name="item" placeholder="{{goalText}}" [(ngModel)]="goalText"> 
     <br><span>{{ goalText }}</span><br> 
     <input type="submit" class="btn" [value]="btnText" (click)="additem()"> 
    </form> 
    </div> 
    <div class="col"> 
    <p class="life-container" *ngFor = "let goal of goals; let i = index" > 
     <input type="text" value=" {{ goal }}" #goalInput disabled> 
     <span class="edit_btn" (click)="edititem(i)" #goalbtn>Edit</span> 
     <span class="delete_btn" (click)="removeitem(i)">Delete</span> 
    </p> 
    </div> 
</div> 

Nun ist die Hauptsache ist, diese Linie, die mich ist verwirrend Was dieses „Ziel "Eigentum tut? Wir verwenden diese Eigenschaft nicht irgendwo in Service-Datei, aber wenn ich diese "Ziel" -Eigenschaft Winkel entfernen gibt mir einen Fehler, so dass ich verwechsele, was ist die Verwendung ??

goal = this.goals.asObservable(); 

Die zweite Sache ist, ich bin vorbei goal_param von zu Hause Komponente und es in Service-Datei empfangen, aber immer noch die gleiche Frage, wenn ich entfernen „Ziel“ Eigenschaft diese Funktion nicht funktionieren. Was hat diese Funktion mit der Eigenschaft "Ziel" zu tun?

changeGoal(goal_param) { 
     this.goals.next(goal_param) 
    } 

Ich weiß, es ist eine grundlegende Frage, aber wenn mir jemand dabei helfen wird zu verstehen, dann werde ich auf mein Lernen motiviert sein.

Vielen Dank im Voraus.

+0

Sie haben Ihren Vorlagencode (HTML) für die Komponente nicht angezeigt. HTML-Vorlagen können auf öffentliche Komponentenvariablen zugreifen (wie "Ziel"). Können Sie diese Datei auch hinzufügen? – Pace

+0

@Pace überprüfen Sie es bitte. Ich habe die HTML-Vorlage hinzugefügt. – dev

Antwort

0

Dieser Dienst erzwingt die Kapselung unter Verwendung der goal-Eigenschaft. Sie können es sich ähnlich wie eine Klasse vorstellen, die eine Getter-Methode, aber keine Setter-Methode hat. Innerhalb des Dienstes ist eine private goals Thema. Ein Thema ist sowohl ein Observer, mit dem Sie Daten "schreiben" können, als auch ein Observable, mit dem Sie Daten "lesen" können.

Die Komponente muss goals abonnieren können, damit sie die Updates erhält, wenn sich die Ziele ändern. Eine Möglichkeit wäre, goals öffentlich zu machen, aber das würde die Kapselung verletzen, denn dann wäre jeder in der Lage, sie zu modifizieren.

Stattdessen wird die Variable goal erstellt. asObservable gibt eine schreibgeschützte Ansicht eines Objekts zurück. So ist goal wirklich nur eine schreibgeschützte Ansicht von goals. Die goal Variable wird hier in der Komponente:

this._data.goal.subscribe(res => this.goals = res); 

Die Komponente wird an den Datendienst Ziele der abonnieren möchte. Wenn sich die Datendiensteziele ändern, legt die Komponente eine Kopie des letzten Werts in ihre eigene goals-Eigenschaft. Die Eigenschaft goals der Komponente wird dann von der Vorlage gelesen, um die Seite anzuzeigen.

Der Grund für diese Kapselung ist, dass alle Änderungen an der goals Variablen über die DataService erzwungen werden. Auf diese Weise können Sie steuern, wie goals geändert wird. Zum Beispiel kann vielleicht goals nur von bestimmten Arten von Benutzern geändert werden, wenn sich das System in einem bestimmten Zustand oder anderen Kriterien befindet. Vielleicht möchten Sie, wann immer goals geändert wird, die Daten in ein bestimmtes Format einmassieren oder irgendeine Art von Berechnungen durchführen.

Verwandte Themen