2017-12-31 22 views
0

나는 매일 까는 각도로 학습하고 있습니다. 나는 현재 각도 서비스를 배우고 있으며 나는 혼란스럽고 혼란스러워하는 것을 혼동하고 있습니다.각도 서비스에 정의 된 메서드를 호출하는 방법

다음은 코드입니다.

서비스 코드

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(); 

두 번째 것은 집에 구성 요소에서 goal_param를 전달하고 서비스 파일 내부를 받고 있지만 여전히 같은 문제는 내가 제거 "목표"속성이 기능이 작동하지 않는 경우하고있다. 이 기능이 "목표"속성과 어떤 관련이 있습니까?

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

나는 그것은 기본적인 질문이지만, 누군가가 나이를 이해하는 데 도움이 될 것입니다 경우 내 학습에 대한 동기를 될 것입니다 알고있다.

미리 감사드립니다.

+0

구성 요소에 대한 템플릿 (HTML) 코드가 표시되지 않았습니다. HTML 템플리트는 공용 구성 요소 변수 (예 :'goal')에 액세스 할 수 있습니다. 그 파일을 추가 할 수 있습니까? – Pace

+0

@Pace 친절하게 확인하십시오. html 템플릿을 추가했습니다. – dev

답변

0

해당 서비스는 goal 속성을 사용하여 캡슐화를 시행하고 있습니다. getter 메소드가 있지만 setter 메소드가없는 클래스와 비슷하다고 생각할 수 있습니다. 이 서비스는 개인 goals 과목입니다. 제목은 데이터를 "쓸"수있는 Observer과 데이터를 "읽을 수있는"Observable입니다.

구성 요소는 목표가 변경 될 때마다 업데이트를 수신 할 수 있도록 goals에 가입 할 수 있어야합니다. 이렇게하는 한 가지 방법은 goals을 공개로 설정하는 것이지만 캡슐화를 위반하는 것은 누구나 수정할 수 있기 때문입니다.

대신 goal 변수가 생성됩니다. asObservable은 제목의 읽기 전용보기를 반환합니다. 따라서 goal은 실제로는 읽기 전용보기 인 goals입니다. goal 변수는 바로 여기에 구성 요소에 사용됩니다

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

구성 요소는 데이터 서비스의 목표에 가입됩니다. 데이터 서비스 목표가 변경 될 때마다 구성 요소는 자신의 goals 속성에 최신 값의 복사본을 저장합니다. 구성 요소의 goals 속성은 서식 파일에 의해 읽혀 페이지를 표시합니다.

이 캡슐화의 이유는 goals 변수에 대한 모든 수정을 DataService을 통해 강제로 수행해야하기 때문입니다. 이를 통해 goals의 수정 방법을 제어 할 수 있습니다. 예를 들어, goals은 특정 유형의 사용자, 시스템이 특정 상태에 있거나 다른 기준에 의해서만 수정 될 수 있습니다. 어쩌면 goals이 수정 될 때마다 데이터를 특정 형식으로 마사지하거나 일종의 계산을 수행하려고 할 수 있습니다.

관련 문제