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>

现在主要的一点是这条让我困惑的路线这＆＃34;目标＆＃34;财产在做什么？我们没有在服务文件中的任何地方使用此属性，但如果我删除此＆＃34;目标＆＃34;属性angular给我错误，所以我很困惑它的用途??

goal = this.goals.asObservable();

第二件事是我从home组件传递goal_param并在服务文件中接收它，但如果我删除＆＃34; goal＆＃34;仍然是同样的问题财产这个功能不起作用。这个功能与＆＃34;目标＆＃34;有什么关系？属性？

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

我知道这是一个基本问题，但如果有人帮助我理解这一点，那么我会更加积极地学习。

提前致谢。

Answer 1

该服务使用goal属性强制执行封装。您可以将其视为类似于具有getter方法但没有setter方法的类。服务内部是私人goals主题。一个主题都是Observer，它允许你“写”＆＃34;数据和Observable，可让您阅读＆＃34;数据

组件需要能够订阅goals，以便在目标发生变化时获取更新。一种方法是将goals公开，但这会违反封装，因为任何人都可以修改它。

而是创建了goal变量。 asObservable返回主题的只读视图。所以goal实际上只是goals的只读视图。 goal变量在此处的组件中使用：

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

该组件正在订阅数据服务的目标。每当数据服务目标发生更改时，组件都会将最新值的副本放在其自己的goals属性中。然后，模板将读取组件的goals属性以显示页面。

这种封装的原因是它强制goals变量的所有修改都通过DataService发生。这允许您控制goals的修改方式。例如，当系统处于某种状态或某些其他标准时，goals可能只能被某些类型的用户修改。也许，每当修改goals时，您都希望将数据按到某种格式或对其进行某种计算。

如何调用角度服务

1 个答案: