角度サービスで定義されたメソッドを呼び出す方法

Question

私は毎日角を学んでいます。私は現在、角度のあるサービスを学んでいます。私は混乱していることについて本当に混乱しており、私はそれを理解することができません。

ここにコードがあります。

サービスコード

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) 
    } 

} 

ホーム・コンポーネント・コード

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

ホームコンポーネントのテンプレートコード

<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> 

今主なポイントは 何この「目標私を混乱させている。このラインであります"プロパティはやっている？私たちはサービスファイルのどこでもこのプロパティを使用していませんが、この "ゴール"プロパティの角を削除するとエラーが出ますので、その使用方法を混乱させますか？

goal = this.goals.asObservable(); 

2つ目は、私はこの機能は動作しません「ゴール」プロパティを削除した場合、私はまだ同じ質問を自宅コンポーネントからgoal_paramを渡し、サービスファイル内でそれを受け取るが、午前です。この機能と「目標」プロパティとは何が関係していますか？

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

私が知っているのは基本的な質問ですが、誰かが私にこれを理解させる助けになるなら、私は自分の学習にもっと意欲的になるでしょう。

ありがとうございます。

Answer 1

このサービスは、goalプロパティを使用してカプセル化を強制しています。ゲッターメソッドを持つがセッターメソッドを持たないクラスと似ていると考えることができます。サービス内にはプライベートgoalsの件名があります。件名はObserverで、データを「書き込む」ことができ、Observableを使用すると、データを「読み取る」ことができます。

コンポーネントは、goalsを購読できる必要があり、目標が変更されるたびにアップデートを取得する必要があります。これを行う1つの方法は、goalsを公開することですが、それはカプセル化に違反します。誰でもそれを変更できるからです。

代わりにgoal変数が作成されます。 asObservableは、サブジェクトの読み取り専用ビューを返します。だからgoalは実際にはgoalsの読み取り専用ビューです。 goal変数はここのコンポーネントで使用されます。

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

コンポーネントは、データサービスの目標に加入されます。データサービスの目標が変更されるたびに、コンポーネントは最新の値のコピーを自身のgoalsプロパティに置きます。コンポーネントのgoalsプロパティがテンプレートによって読み取られ、ページが表示されます。

このカプセル化の理由は、goals変数へのすべての変更がDataServiceによって強制的に行われるためです。これにより、goalsの変更方法を制御できます。たとえば、goalsは、特定の種類のユーザー、システムが特定の状態にあるとき、または他の何らかの基準によってのみ変更できます。たぶん、goalsが変更されたときは、データを特定のフォーマットにマッサージするか、何らかの計算をしたいと思うかもしれません。